Vue使用ajax 关于axios遇到乱码等问题的那些坑

从jQuery刚转到Vue的时候,对ajax的替代方案是选择了npm上的axios,理由也比较简单,两者的api相似,调用方式也很接近,过渡可以说是无缝吧,不过在做第一个项目的时候还是踩了个坑,特此记录下来。

先说一下遇到的那些坑:

移动端真机post乱码

这个情况当时是很懵逼的,因为在PC端,以及使用Chrome的移动端模拟器测试都一切正常,但到了真机上提交数据时,只要包含了中文,post到服务端的结果永远是【銆愭姤鍚嶇粍鍒】,至今还是不知道这个到底是什么鬼。

当时搜索了很多issue,都是建议在Content-Type添加charset为utf-8,但实测没什么用,最后还是老老实实回顾了一下英文的官方文档,发现这么一句话:

Alternatively, you can encode data using the qs library:

qs library?赶紧去查了一下qs之后,恍然大悟,于是引入了qs,完美解决(这一点和当初jQuery就不一样,之前压根就没遇到这种情况emm)。

最后回顾一下axios的使用方法:

axios官方文档 https://www.npmjs.com/package/axios
qs官方文档 https://www.npmjs.com/package/qs

//安装axios和qs
npm i axios
npm i qs

//打开main.js,在全局引入
//注意这里axios和qs都不能用use,因为不属于Vue的插件,不带安装接口,得用prototype原型引入
//引入后,就可以在任意组件里使用this.$ajax去调用axios了,qs也是this.$qs
import axios from 'axios'
import qs from 'qs'

Vue.prototype.$ajax = axios
Vue.prototype.$qs = qs

//注意回调那里我是用了箭头函数提升了this,否则需要提前先设定一个变量把this存储起来

//get请求,注意是使用params
this.$ajax({
    method: "get",
    url: "接口的地址",
    params: {
        param1: "接口参数…",
        param2: "接口参数…",
        param3: "接口参数…"
        // ……
        // 更多的参数,一般都是page页码,tpp每页数量等
    },
    responseType: "json"
}).then((response)=>{
    // 请求成功后执行的操作
    // ...
}).catch((error)=>{
    // 请求失败,一般都是返回对应的提示给用户
    // ...
});

//post请求,注意是使用data和qs
this.$ajax({
    method: "post",
    url: "接口的地址",
    data: this.$qs.stringify({
        param1: "接口参数…",
        param2: "接口参数…",
        param3: "接口参数…"
        // ……
        // 更多的参数,一般都是用户填写的数据、用户身份校验信息等
    }),
    responseType: "json"
}).then((response)=>{
    // 请求成功执行的操作
    // ...
}).catch((error)=>{
    // 请求失败,一般都是返回对应的提示给用户
    // ...
});

目前主要就是上面这些,其他的扩展需求,等以后根据项目实际需要再陆续继续补充记录。

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *