Axios【AJAX I\O System】
创建案例项目并且安装Axios
npm install axios --save
接口测试网址:
http://httpbin.org/
案例提供的数据地址:
http://123.207.32.32:8000/home/multidata
在Main.js中导入Axios
import axios from 'axios';
一、请求发送
基本语法:
1、请求地址
2、请求方式
3、请求参数
4、链式then调用响应
axios({
url : 'http://123.207.32.32:8000/home/multidata',
method : 'post', /* get */
params : {
pageIndex : 1,
type : 'pop',
userId : '... ...'
},
}).then(function (result) {
console.log(result);
});
其他请求方式:
const config = {
url : 'http://123.207.32.32:8000/home/multidata',
method : 'post', /* get */
params : {
pageIndex : 1,
type : 'pop',
userId : '... ...'
},
}
axios(config);
axios.request(config);
axios.get(config.url,config);
axios.delete(config.url, config);
axios.head(config.url, config);
axios.post(config.url, config.params, config);
axios.put(config.url, config.params, config);
axios.patch(config.url, config.params, config);
同时发送请求
axios.all([
axios({
url : 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url : 'http://123.207.32.32:8000/home/data',
params : {
type : 'sell',
page : 5
}
})
]).then(resultList => {
console.log(resultList);
});
响应结果分开传递
axios.all([
axios({
url : 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url : 'http://123.207.32.32:8000/home/data',
params : {
type : 'sell',
page : 5
}
})
]).then(axios.spread((r1, r2) => {
console.log(r1);
console.log(r2);
}));
分开传递的写法就相当于解构函数的写法,直接声明了属性变量直接调用
二、配置详细
全局配置:
也可以在局部请求时更改配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'; // 根URL
axios.defaults.timeout = 5000; /* 毫秒 */ //超时时间上限
axios.defaults.transformRequest = function (data) { // 请求前数据处理
};
axios.defaults.transformResponse = function (data) { // 请求后数据处理
};
axios.defaults.headers = { // 请求头
'x-Requested-With' : 'XMLHttpRequest'
};
axios.defaults.params = { // 请求参数
id : 12
};
axios.defaults.paramsSerializer = function (params) { // 查询对象序列化
// todo ... ...
}
axios.defaults.data = { /* 响应请求体 */
}
axios.defaults.withCredentials = false; // 跨域是否携带Token
axios.defaults.adapter = function (resolve, reject, config) { // 自定义请求处理
// todo ... ...
}
axios.defaults.auth = { // 身份信息
username : '',
password : ''
}
axios.defaults.responseType = 'json'; // 响应格式