Vue request接口get请求正常,post请求失效,一直处于pending状态

在做项目中,我们要是自己搭建一个vue项目框架需要耗费很多时间。所以很多时候方便快速开发,直接利用网上的各种框架。最近在网上下了一个vue2模板项目,在开发过程中利用它封装的request方法请求接口过程中,发现一个post接口请求一直响应超时,但是在postman上测试接口,数据能正常返回,奇怪的是get请求也能够请求成功,说明代理配置上也是没问题的。

以前用若依框架也没遇到过这个问题啊。网上各种搜有人分析是post的数据格式。但是我看request方法里面格式也没做处理啊,寻思一翻最终想到这个罪魁祸首mock。

大家先了解一下mock:

在 vue 或 react 项目中使用 mockjs 搭建 mock server_react 添加mock_不怕麻烦的鹿丸的博客-优快云博客

我这个框架有登录,所以用到了mock,mock对请求做了处理,判断你系统有没有引入mock,看下vue.config.js配置里这行属性:

最终网友的解决办法来了:

两种办法,再次处理返回数据格式和直接注释mock引入。要是没用到数据模拟的话,直接注释就好。重启项目请求访问正常了。

proxy: {
    
    
    '/dev-api': {
    
    
        target: 'http://1x.xx.x.xxx:xxxx', //
        changeOrigin: true,
        pathRewrite: {
    
    
          '^/dev-api': ''
        },
        //第一种方法
        onProxyReq: function(proxyReq, req, res, options) {
    
    
          if (req.body) {
    
    
            const bodyData = JSON.stringify(req.body)
            // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
            proxyReq.setHeader('Content-Type', 'application/json')
            proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))
            // stream the content
            proxyReq.write(bodyData)
          }
       }
   }
},
//第二种方法,注释这行
before: require('./mock/mock-server.js')

import axios from "axios"; import { ElMessage, ElLoading } from "element-plus"; // 全局状态 const pendingRequests = new Map() let loadingCount = 0 let loadingInstance = null const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 15000, }); // 生成唯一请求标识 const generateReqKey = (config) => { const { method, url, params, data } = config return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&') } // 请求拦截器 service.interceptors.request.use(config => { const requestKey = generateReqKey(config) // 取消重复请求 if (pendingRequests.has(requestKey)) { pendingRequests.get(requestKey)('取消重复请求') } config.cancelToken = new axios.CancelToken(cancel => { pendingRequests.set(requestKey, cancel) }) // 全局Loading控制 if (!config.silentLoading) { loadingCount++ if (loadingCount === 1) { loadingInstance = ElLoading.service({ lock: true, text: "加载中...", background: "rgba(0, 0, 0, 0.7)", }) } } // Token处理 const token = localStorage.getItem("token"); token && (config.headers.Authorization = `Bearer ${token}`) return config }) // 响应拦截器 service.interceptors.response.use( response => { const requestKey = generateReqKey(response.config) pendingRequests.delete(requestKey) // 关闭Loading if (!response.config.silentLoading) { loadingCount = Math.max(0, loadingCount - 1) if (loadingCount === 0 && loadingInstance) { loadingInstance.close() } } // 业务逻辑处理 const res = response.data if (res.code !== 200) { ElMessage.error(res.message || "操作失败") return Promise.reject(new Error(res.message || "Error")) } return res }, error => { // 清理请求记录 if (axios.isCancel(error)) { console.log('请求被取消:', error.message) return Promise.reject(error) } const requestKey = generateReqKey(error.config) pendingRequests.delete(requestKey) // 关闭Loading if (!error.config.silentLoading) { loadingCount = Math.max(0, loadingCount - 1) if (loadingCount === 0 && loadingInstance) { loadingInstance.close() } } // 增强错误处理 if (!error.response) { ElMessage.error("网络连接异常") } else { const status = error.response.status const messageMap = { 400: '请求参数错误', 401: () => { localStorage.removeItem('token') router.replace('/login') return '登录已过期' }, 403: '没有操作权限', 404: '资源不存在', 500: '服务器错误', 502: '网关错误', 503: '服务不可用' } const handler = messageMap[status] || (() => `请求失败 (${status})`) const message = typeof handler === 'function' ? handler() : handler ElMessage.error(message) } return Promise.reject(error) } ) export default service; 我封装的请求方法有什么问题,改进一下
03-08
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值