引入axios
npm install axios
或者直接引入js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用axios
// 通过 params 设置参数:
axios.get('/url', {
params: {
ID: 123
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios回调函数中的this指向改变,无法访问data中的数据,所以要在axios之前把this赋值给that,在axios的then回调函数中使用that访问data。
使用application/x-www-form-urlencoded请求
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api', params);
URLSearchParams 不是所有的浏览器均支持。可以使用 qs 库来编码数据:
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
// Or in another way (ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);
配置默认值
/*全局的axios默认值*/
axios.defaults.baseURL = 'url';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/*自定义实例默认值*/
//创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'url'
});
//在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
timeout: 5000
});
拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});