Vue使用ajax 关于axios遇到乱码等问题的那些坑
内容提要
文章介绍Vue项目用axios替代jQuery ajax的经验：移动端真机提交含中文的post数据时出现乱码，添加charset无效，查阅官方文档后发现需用qs库序列化数据，引入qs后问题解决。文中还给出axios与qs的全局引入方法，以及get用params、post用data配合qs.stringify的调用示例。
延伸解读
乱码问题的触发条件与排查思路
文章指出，乱码仅在移动端真机提交含中文的 POST 数据时出现，而 PC 端和 Chrome 移动模拟器均正常。这提示问题可能与真机环境下的请求编码处理差异有关。作者尝试在 Content-Type 中添加 charset=utf-8 无效，最终通过查阅 axios 官方文档，发现需使用 qs 库序列化数据才解决。这提醒开发者，遇到类似问题时，应优先查阅官方文档而非盲目搜索 issue。
qs 库在 axios 中的角色与使用方式
文章强调，axios 官方文档建议使用 qs 库对数据进行编码。具体做法是：安装 qs 后，在 main.js 中通过 Vue.prototype.$qs = qs 全局引入，然后在 POST 请求中用 this.$qs.stringify() 包裹 data 参数。这与 GET 请求使用 params 不同，POST 需用 data 并配合 qs 序列化。作者还提醒，axios 和 qs 不是 Vue 插件，不能用 Vue.use()，而要用原型挂载。
从 jQuery 迁移到 axios 的注意事项
作者从 jQuery 转向 Vue 时选择 axios，因其 API 与 jQuery ajax 相似，过渡无缝。但实际项目中遇到了 jQuery 未曾出现的乱码问题，说明两者在数据处理上存在差异。文章给出的解决方案是引入 qs 库，并提供了全局引入和调用示例。对于同样从 jQuery 迁移的开发者，需注意 axios 默认行为可能不同，尤其是 POST 数据的序列化方式。
Q&A
Vue项目中使用axios提交中文数据到移动端真机时出现乱码，怎么解决？
使用qs库对post数据进行序列化。安装qs后，在main.js中引入并挂载到Vue原型上，post请求时用this.$qs.stringify()处理data参数即可解决乱码。
为什么在Content-Type里添加charset=utf-8对axios乱码问题无效？
文章中提到，虽然很多issue建议在Content-Type添加charset为utf-8，但实测没什么用。最终是通过使用qs库序列化数据解决的。
axios和qs在Vue项目中如何全局引入并使用？
在main.js中引入axios和qs，然后通过Vue.prototype.$ajax = axios和Vue.prototype.$qs = qs挂载到原型上。之后在任意组件中就可以用this.$ajax和this.$qs调用。
axios的get请求和post请求在参数传递上有什么区别？
get请求使用params对象传递参数，post请求使用data传递参数，并且post的data需要用qs.stringify()进行序列化。
从jQuery转到Vue时，为什么选择axios替代ajax？
因为axios和jQuery的ajax在api和调用方式上很相似，过渡无缝，所以选择axios作为替代方案。
axios post请求时，data参数为什么要用qs.stringify处理？
因为axios官方文档提到可以使用qs库来编码数据，qs.stringify能将对象序列化为URL编码的字符串，避免乱码问题，特别是包含中文时。
