前言
提示：axios 基于promise封装的库[核心还是基于 XMLHttpRequest 发送请求的]
提示：http://www.axios-js.com/zh-cn/docs/
一、axios发送数据的返回情况
基于axios发送数据请求，返回结果都是一个promise实例
1、默认情况下，http状态码是2开始，则让promise状态成功
- 服务器返回的http状态码是2开始，则让promise状态成功，值是一个respose对象
response = {
config:{...}, 发送axios请求设置的配置项
data:{...}, 服务器返回的响应主体信息
headers:{...}, 服务器返回的响应头信息
request:XMLHttpRequest实例对象, 原生的xhr对象
status:200, 服务器响应的HTTP状态码
statusText:'OK' 状态码的描述
}
- promise状态为失败
1、服务器有返回信息 [response对象不存在]，只不过http状态码不是以2开始的
reason = {
config:{...},
isAxiosError: true,
request:XMLHttpRequest实例对象,
response:等同于成功获取的response对象,
toJSON:function...,
message:'xxx',
...
};
2、请求超时 或者 请求中断了
3、断网了，特点：服务器没有反馈任何的信息
2、自定义服务返回的HTTP状态码为多少是成功，为多少失败！！
官网描述：
validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve; 否则，promise 将被 rejecte
// axios的validateStatus配置项，就是自定义promise实例状态是成功的条件
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
二、基于axios发送请求的方式
1、axios([config]) 或者 axios([url],[config])
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 获取远端图片
axios({
method:'get',
url:'/user/list',
params:{
departmentId:0
}
})
.then((response)=>{
console.log('res',response)
})
.catch((error)=>{
console.log('error',error)
})
try{
let response = await axios('/user/list',{
params:{
departmentId:0
},
validateStatus: (status) => {
return status >= 200 && status < 300; //默认处理机制
}
})
console.log('res',response)
}catch(response){
console.dir(response)
}
2、axios.request([config])
try{
let response = await axios.request({
url:'/user/list',
params:{
departmentId:0
},
validateStatus: (status) => {
return status >= 200 && status < 300; //默认处理机制
}
})
console.log('res',response)
}catch(response){
console.dir(response)
}
3、axios.get/delete/head/options([url],[config])
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。# 总结
4、创建axios 实例发起请求
let instance = axios.create([config])
创建的instance等同于axios，使用起来和axios一样…
instance.get([url],[config])
…
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
三、axios发送请求时候的配置项 config
1、url
url:请求的地址 发送请求的时候，但凡没有单独设置url的，都需要在配置项中指定
2、baseURL请求地址的通用前缀
最后发送请求的时候，是把baseURL和url拼接在一起发送的
axios.get(’/user/list’,{
baseURL:‘http://api.zhufeng.cn’,
…
});
最后发送请求的地址是 ‘http://api.zhufeng.cn/user/list’
特殊情况：如果url地址本身已经存在了 http或者https 等信息，说明url本身就已经是完整的地址了，baseURL的值则无需再拼接了
3、transformRequest
transformRequest 允许在向服务器发送前，修改请求数据
只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
在我们自己.then/catch之前，对服务器返回的结果进行修改
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
它“只针对POST系列请求”，把我们自己传递[data]格式化为指定的格式，后期再基于请求主体发送给服务器!!
axios内部做了一个处理，根据我们最后处理好的[data]的格式，自动设置请求头中的Content-Type值!!「不一定完全准确」
@1 客户端基于请求主体传递给服务器的数据格式
+ form-data Content-Type:multipart/form-data 主要应用于文件上传/表单提交
+ urlencoded Content-Type:application/x-www-form-urlencoded
GET系列请求:是基于URL问号传参把信息传递给服务器的 ?xxx=xxx&xxx=xxx
xxx=xxx&xxx=xxx 这种字符串就是urlencoded格式字符串
+ raw 泛指，代指文本格式「含：普通格式文本字符串、JSON格式字符串…」
普通字符串 Content-Type:text/plain
JSON格式字符串 Content-Type:application/json
…
+ binary 进制格式数据 主要应用于文件上传
@2 axios内部在默认情况下，如果我们[data]传递的是个普通对象，而且也没有经过transformRequest处理，则内部默认会把对象变为JSON格式字符串传递给服务器
await axios.post(
'/user/login',
{
account:"18379005583",
password:"123456"
},
{
transformRequest:(data)=>{
return qs.stringify(data)
}
}
)
这样的请求最终是以下面的形式传参。qs作用就是把data转化成 urlencoded 字符串
return qs.stringify(data)改为return data 则也是一个对象
假如说传的是一个formdata 格式的数据，那么就不需要qs处理，只有是纯粹对象的时候才会需要qs处理
将上述请求修改成如下：
let fm = new FormData()
fm.append("account","3787")
await axios.post(
'/user/login',
// fm,
// {
// username:'uuuu',
// password:'899'
// },
'****',
{
transformRequest:(data)=>{
return isPlainObject(data) ? qs.stringify(data) :data
}
}
)
分别传入 fm、纯对象 、和字符串。浏览器的请求参数分别是这样的
所以要判断一下。isPlainObject(data) ? qs.stringify(data) :data. 是否是纯粹对象
判断是否为纯粹对象的代码
// 检测是否为纯粹的对象
export const isPlainObject = function isPlainObject(obj) {
let proto, Ctor;
if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false;
proto = Object.getPrototypeOf(obj);
if (!proto) return true;
Ctor = proto.hasOwnProperty('constructor') && proto.constructor;
return typeof Ctor === "function" && Ctor === Object;
};
4、transformResponse
在我们自己.then/catch之前，对服务器返回的结果进行修改
transformResponse:data=>{
// data:从服务器获取的结果，而且是响应主体信息「服务器响应主体返回的信息一般都是JSON格式字符串」
return data;
};
5、 headers:{…} 自定义请求头信息
6、 params:{…}
GET系列请求，基于URL问号参数，把信息传递给服务器；我们params一般设置为对象，axios内部会把对象变为 urlencoded 格式拼接到URL的末尾
7、data:{…}
POST系列请求，基于请求主体传递的信息…
8、 timeout:0 设置超时时间，写0就是不设置
9、 withCredentials:false 在CORS跨域请求中，是否允许携带资源凭证
10、 responseType:把服务器返回的结果设置为指定的格式
‘arraybuffer’, ‘blob’, ‘document’, ‘json’「默认」, ‘text’, ‘stream’ …
11、 onUploadProgress:progressEvent=>{}
onDownloadProgress:progressEvent=>{}
监听上传和下载的进度
12、 validateStatus
status=>status>=200 && status<300
定义服务器返回的状态吗是多少，promise实例是成功的
四、取消
axios请求的取消，依赖于 axios.CancelToken 完成
const source = axios.CancelToken.source();
axios.get([url],{
…,
cancelToken: source.token,
}).catch(reason=>{
// 取消后,promise实例是失败的
});
source.cancel(’…’); 取消发送
const source = axios.CancelToken.source()
let fm = new FormData()
fm.append("account","3787")
axios.post(
'/user/login',
// fm,
{
username:'uuuu',
password:'899'
},
// '****',
{
transformRequest:(data)=>{
return isPlainObject(data) ? qs.stringify(data) :data
},
transformResponse:(data)=>{
console.log(data)
return JSON.parse(data)
},
cancelToken:source.token
}
)
.then((res)=>{
console.log(res)
})
.catch((error)=>{
console.log(error)
})
setTimeout(()=>{
source.cancel('cancel')
})
五、拦截器
5-1、请求拦截器：
当axios把各方面配置都处理好了，在即将基于这些配置项服务器发送请求的时候，触发请求拦截器
axios.interceptors.request.use(config=>{
// config存储的是axios处理的好的配置，我们一般在请求拦截器中修改配置
//...
return config;
});
5-1、响应拦截器
服务器返回结果，axios已经知道返回的promise实例状态是成功还是失败了，在自己调用 .then/catch 之前，先根据promise状态，把响应拦截器中设置的方法执行！！
axios.interceptors.response.use(
response=>{
//promise实例是成功的，执行这个方法：response存储服务器返回的结果
},
reason=>{
//promise实例是失败的，执行这个方法：reason存储失败的原因
}
);
axios.get([url],[config])
.then(value=>{})
.catch(reason=>{});
官方文档：
// 添加请求拦截器
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);
});