axios 配置及使用
在线CDN地址
https://unpkg.com/axios/dist/axios.min.js
安装
npm i axios -S
导入
import axios from 'axios'
全局配置
方案一
创建实例的时候传入配置对象
// 创建实例的时候传入配置对象
const $https = axios.create({
baseURL: 'https://some-domain.com/api/', // 设置接口地址
timeout: 1000, //设置超时时间
headers: {'Content-Type': 'application/x-www-form-urlencoded'} //设置请求头
});
先创建实例对象, 在进行配置
// 先创建实例对象
const $https = axios.create();
// 再进行配置
$https.defaults.baseURL='https://api.example.com' ;
// 设置超时时间
$https.defaults.timeout = 2500;
// 设置认证请求头
$https.defaults.headers.common['Authorization'] = AUTH_TOKEN;
需要使用实例对象$https发送请求
方案二
// 设置接口地址
axios.defaults.baseURL='http://www.api.com'
// 对提交给服务端的数据进行预处理,将对象{}=>queryString查询字符串的格式;
// 因为默认提交的是json(Content-Type:application/json), 服务端无法对json直接处理
axios.defaults.transformRequest: [function (data, headers) {
// 对提交给服务端的数据进行预处理
// data默认为一个对象
if(typeof(data)=='object'){
let arr=[];
for(var key in data){
arr.push(key+'='+data[key]);
}
// 最终返回的数据格式:name=zs&age=30
return arr.join('&')
}
return data;
}];
// 设置公共请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
使用
发送get请求
axios.get('/user',{
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
发送post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
