概述：
1.axios：一个基于Promise用于浏览器和nodejs的HTTP客户端。本质是对ajax的封装。
特征：
- 从浏览器中创建XMLHttpRequest
- 从node.js发出http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
2.安装
- npm install axios
- import axios from "axios"
3.API
1 axios(config)
eg: axios({
method:"post",
url:"/user",
data:{
firstName:"nanhua",
lastName:"qiushui"
}
});
2.axios(url,config) //默认为get请求
3.请求方法别名
axios.request(config)
axios.get(url,config)
axios.post(url,data,config)
axios.delete(url,config)
axios.head(url,config)
axios.put(url,data,config)
axios.patch(url,data,config)
4.并发
自定义配置创建axios实例
var instance = axios.create({
baseURL:"https://some-domain.com/api/",
timeout:1000,
headers:{"X-Custom-Header":"foobar"}
})
自定义实例默认值
//创建实例时设置
//实例创建后修改默认值（设置全局axios默认值）
axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
并发：axios.all(iterable)
eg: axios.all([
axios.get("https://api.github.com/xxx/1");
axios.get("https://api.github.com/xxx/2");
]).then(axios.spread(function(userResp,reposResp){
console.log("User",userResp.data);
console.log("Repositories",reposResp.data);
}))
* 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用axios.spread分割成多个单独的响应对象。
5.config参数
baseURL: 'https://some-domain.com/api/', //将自动加在url前面，除非url是一个绝对URL
//允许在向服务器发送前，修改请求数据
//只能用在PUT\POST\PATCH
//后面数组的函数必须返回一个字符串/ArrayBuffer或Stream
transformRequest:[function(data){
//对data进行任意转换处理
return data;
}],
//在传递给then/catch之前，允许修改响应数据
transformResponse: [function (data) {
return data;
}],
//即将被发送的自定义请求头
headers:{
'X-Requested-With': 'XMLHttpRequest'
},
//即将与请求一起发送的URL参数
params:{
ID: 12345
},
//负责params序列化的函数
paramsSerializer:function(params){
return Qs.stringify(params,{arrayFormat: "brackets"});
},
//超时
timeout: 1000,
//表示跨域请求时是否需要使用凭证
withCredentials: false,
//允许响应内容的最大尺寸
maxContentLength: 2000,
//对打重定向数目
maxRedirects:5,
//是否启用长连接
httpAgent: new http.Agent({
keepAlive: true
}),
httpsAgent: new https.Agent({
keepAlive: true
}),
//代理服务器设置
proxy:{
host:"127.0.0.1",
port: 9000,
auth:{
username:"nanhuaqiushui",
password:"Huawei@123"
}
}
6.响应结构
{
data:{},
status:200,
statusText:"OK",
headers:{}, //服务器响应的头
config:{} //为请求提供的配置信息
}
7.拦截器
//请求拦截器
axios.interceptors.request.use(function(config){
//发送请求之前做些什么
return config;
},function(error){
//请求错误之后做些什么
return Promise.reject(error);
})
//响应添加拦截器
axios.interceptors.response.use(function(config){
//发送请求之前做些什么
return config;
},function(error){
//请求错误之后做些什么
return Promise.reject(error);
})
//移除拦截器
var myInterceptor = axios.interceptors.request.use(function(){
...
})
axios.interceptors.request.eject(myInterceptor);
新兴实践
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 100000
})
// 请求拦截器
service.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json'
if (store.getters.token) {
// 让每个请求携带token
config.headers['Authorization'] = store.getters.token
}
return config
},
error => {
Toast.failed('网络异常，请检查网络连接')
console.log(error) // for debug
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code && res.code !== 200) {
Toast.failed(res.message)
}
return response
},
error => {
Toast.failed('网络异常，请检查网络连接')
return Promise.reject(error)
}
)
export default service