记一次jquery- ajax转vue-aixos 踩坑

2020-05-13  本文已影响0人  鹿啦啦zz

问题是什么

项目由jquery 转 vue
ajax 请求改成 axios
移植代码get 问题不大,但是post请求无法正确取到数据,甚至出现一请求后台就挂的情况

问题排查

1. 是我参数传错了嘛?

不会吧,copy过来的呀。对比了一下参数内容,一模一样的呀

2. 是我axios的写法写错了吗?

不是,因为写错的话,应该连数据都无法返回,但是现在的情况是,我不管发什么样的参数过去,都是返回一样的数据,说明前端传值无效

3. 再重新看下参数

旧框架
新框架

发现了两处不同

请求头中的Content-Type不一样
一个是application/json,一个是application/x-www-form-urlencoded

解决问题

只要发现问题所在,这就好办了

  1. 在拦截器中,设置Content-Typeapplication/x-www-form-urlencoded
//配置发送请求前的拦截器 可以设置token信息
axios.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = "application/x-www-form-urlencoded";
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

可是改完测试发现没有改动到,请求头中的Content-Type依然是application/json

  1. 引入qs
    config.data = qs.stringify( config.data)
//配置发送请求前的拦截器 可以设置token信息
axios.interceptors.request.use(
    config => {
        config.data = qs.stringify( config.data);//关键代码
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

到此终结撒花,完美解决

题外话qs 是何方神圣

qs.stringify
基本用法

// qs.stringify 则和 qs.parse 相反,是把一个参数对象格式化为一个字符串。
let params = { c:'b', a: 'd' };
qs.stringify(params) 
// 结果是
‘c=b&a=d‘

参考文章
https://segmentfault.com/a/1190000015261229?utm_source=tag-newest
qs简介

上一篇 下一篇

猜你喜欢

热点阅读