post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置,即设置post的请求头为
~~~
axios.defaults.headers.post\['Content-Type'\] = 'application/x-www-form-urlencoded;charset=UTF-8';
~~~
一般项目中 有2种格式,json格式和formData格式,在项目中我们可以直接传递json对象,axios源码会自动帮我们处理成json字符串的形式
如果是表单请求, 需要传formData的格式, 有2种方式
~~~
方式一:
var formdata=new FormData();//可以通过append()方法来追加数据
formdata.append("name","laotie");//通过get方法对值进行读取
console.log(formdata.get("name"));//laotie//通过set方法对值进行设置
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu
方式二:qs
json数据类型:application/json;charset=UTF-8
FormData:application/x-www-form-urlencoded;charset=UTF-8
~~~
目录的`src`文件夹下新建`providers`文件夹,在该文件夹内新建`axios.js`文件,内容如下代码块:
~~~
import axios from 'axios';
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://www.baidu.com' //填写域名
//http request 拦截器
axios.interceptors.request.use(
config => {
config.headers = {
'Authorization': localStorage.getItem('token'),
'version': '1.0',
'Content-Type': 'application/json;charset=UTF-8'
}
return config;
},
error => {
return Promise.reject(err);
}
);
//响应拦截器即异常处理
axios.interceptors.response.use(response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
return response
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('错误请求')
break;
case 401:
console.log('未授权,请重新登录')
break;
case 403:
console.log('拒绝访问')
break;
case 404:
console.log('请求错误,未找到该资源')
break;
case 405:
console.log('请求方法未允许')
break;
case 408:
console.log('请求超时')
break;
case 500:
console.log('服务器端出错')
break;
case 501:
console.log('网络未实现')
break;
case 502:
console.log('网络错误')
break;
case 503:
console.log('服务不可用')
break;
case 504:
console.log('网络超时')
break;
case 505:
console.log('http版本不支持该请求')
break;
default:
console.log(`连接错误${err.response.status}`)
}
} else {
console.log('连接到服务器失败')
}
return Promise.resolve(err.response)
})
~~~
响应拦截器很好理解,就是服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理。例如上面的思想:如果后台返回的状态码是200,则正常返回数据,否则的根据错误的状态码类型进行一些我们需要的错误,其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。