客户端项目中有一个小需求“我的卡券”，有单独入口，所以综合考虑之后，采用了vue来实现，因为是初次使用，导致了选型不当，先用了SUI-Mobile来搭建页面，当决定使用vue的时候，页面也搭建完毕了，最终结果就是使用vue+SUI-Mobile+vue-router实现了这么一个小需求。
中间考虑使用axios来作异步请求的，但是很不幸的是，在请求接口的时候axios报了404，由于有方便替代的Zepto封装的ajax，所以当时直接改用ajax来请求了，也没有去研究究竟什么原因导致的axios请求报错的。这段时间，相对不那么忙的时候，想到这个问题，就回过头来把这块的vue代码做了一个简单的review，修改了一些明显不那么合适的vuejs的代码，然后就将目标定在了异步请求上面。
先看一下，正确的ajax代码，真实的接口就以变量interface替代：
getData(){
var _this = this;
$.showIndicator();
var ctx = GetQueryString("path");
$.ajax({
type: "post",
url:ctx+interface,
data:{"coupon_status":1},
success:function(data){
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
}
})
}
除了真实的接口，这就是之前使用的能够正常请求的ajax请求。
下面改造为axios格式的
getData(){
var _this = this;
var ctx = GetQueryString("path");
$.showIndicator();
axios.post(ctx + interface, {"coupon_status":1}).then((res)=>{
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
})
}
一眼看过去，除了将ajax改为axios，我相信大多数人是看不出有什么问题的
但是事实就是：报错了，而且报404错误
不明原因的ctx获取的值出现了重复的educloud，而在ajax请求时却是正常的，导致了接口报404。
通过翻阅axios在GitHub网站api，引用原文You can specify config defaults that will be applied to every request.就是对每一个请求接口设定一些默认配置。
axios.defaults.baseURL = ctx;
再请求一次接口
不再报404错误了，而是400，那400是什么呢？
400错误是由于不正确的请求造成的，说明正在搜索的网页可能已经删除、更名或暂时不可用。
关键在于请求不正确，说明接口已经请求到了，但是当前请求接口有问题，然而ajax请求是正常的，那么问题又在什么地方呢？如果经验比较丰富一点的，很容易联想到是不是参数有问题？
继续翻看api，发现
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
这里对参数进行了一下处理，那么就照着来吧
import axios from "axios"
var ctx = GetQueryString("path");
var qs = require('qs');
axios.defaults.baseURL = ctx;
getData(){
var _this = this;
$.showIndicator();
axios.post(interface, qs.stringify({
"coupon_status":0
})).then(function (response) {
console.log(response)
var data = response.data;
$.hideIndicator();
if(data.ret_code==1){
//网络异常
$.alert('网络异常');
}else{
_this.list = data.ticketlist;
}
}).catch((err)=>{
console.log(err)
})
很荣幸，问题解决了，接口已经可以正确返回数据了。
总结一下：
axios在调用接口产生问题时，一方面可能是因为接口url不对，那么通过配置默认的baseURL，另一方面，考虑post参数问题，不能直接传递一个JS对象，而需要通过qs.stringify(对象)转换一下。
试图使用JSON.stringify()转换，很不幸，不可以。