axios
一、安装
1、利用npm安装npm install axios --save
2、利用cnpm安装cnpm install axios --save
3、利用bower安装bower install axios --save
4、直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二、请求的配置(request config)
{
//`url`是请求的服务器地址
url:'/url',
//`method`是请求资源的方式
method:'get'//default
//如果`url`不是绝对地址,那么`baseURL`将会加到`url`的前面
//当`url`是相对地址的时候,设置`baseURL`会非常的方便
baseURL:'https://127.0.0.1/api/',
//`transformRequest`选项允许我们在请求发送到服务器之前对请求的数据做出一些改动
//该选项只适用于以下请求方式:`put/post/patch`
//数组里面的最后一个函数必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
transformRequest:[function(data){
// 在这里根据自己的需求改变数据
return data;
}],
//`transformResponse`选项允许我们在数据传送到`then/catch`方法之前对数据进行改动
transformResponse:[function(data){
// 在这里根据自己的需求改变数据
return data;
}],
//`headers`选项是需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},
//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
//他的类型必须是一个纯对象或者是URLSearchParams对象
params: {
ID:12345
},
//`paramsSerializer`是一个可选的函数,起作用是让参数(params)序列化
//例如(https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param)
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},
//`data`选项是作为一个请求体而需要被发送的数据
//该选项只适用于方法:`put/post/patch`
//当没有设置`transformRequest`选项时dada必须是以下几种类型之一
//string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams
//仅仅浏览器:FormData/File/Bold
//仅node:Stream
data {
firstName:"Fred"
},
//`timeout`选项定义了请求发出的延迟毫秒数
//如果请求花费的时间超过延迟的时间,那么请求会被终止
timeout:1000,
//`withCredentails`选项表明了是否是跨域请求
withCredentials:false,//default
//`adapter`适配器选项允许自定义处理请求,这会使得测试变得方便
//返回一个promise,并提供验证返回
adapter: function(config){
/*..........*/
},
//`auth`表明HTTP基础的认证应该被使用,并提供证书
//这会设置一个authorization头(header),并覆盖你在header设置的Authorization头信息
auth: {
username:"lisi",
password: "123456"
},
//返回数据的格式
//其可选项是arraybuffer,blob,document,json,text,stream
responseType:'json',//default
//
xsrfCookieName:'XSRF-TOKEN',//default
xsrfHeaderName:'X-XSRF-TOKEN',//default
//`onUploadProgress`上传进度事件
onUploadProgress:function(progressEvent){
},
// 下载进度的事件
onDownloadProgress:function(progressEvent){
},
//相应内容的最大值
maxContentLength:2000,
//`validateStatus`定义了是否根据http相应状态码,来resolve或者reject promise
//如果`validateStatus`返回true(或者设置为`null`或者`undefined`),
//那么promise的状态将会是resolved,否则其状态就是rejected
validateStatus:function(status){
return status >= 200 && status <300;//default
},
//`maxRedirects`定义了在nodejs中重定向的最大数量
maxRedirects: 5,//default
//`httpAgent/httpsAgent`定义了当发送http/https请求要用到的自定义代理
//keeyAlive在选项中没有被默认激活
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
//proxy定义了主机名字和端口号,
//`auth`表明http基本认证应该与proxy代理链接,并提供证书
//这将会设置一个`Proxy-Authorization` header,并且会覆盖掉已经存在的`Proxy-Authorization` header
proxy: {
host:'127.0.0.1',
port: 9000,
auth: {
username:'asds',
password:'dddd'
}
},
//`cancelToken`定义了一个用于取消请求的cancel token
//详见cancelation部分
cancelToken: new cancelToken(function(cancel){
})
}
三、自定义配置
1、实列创建
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.URL,
// 默认get请求
method: 'GET',
// 超时时间
timeout: 10000,
// 跨域请求,允许保存cookie
withCredentials: true,
// 请求都设置
headers: { 'Content-Type': 'application/json;charset=utf-8' },
// 处理js精度丢失问题
transformResponse(data) {
try {
// https://github.com/jc-lab/json-bigint
const jsonBig = jsonbig({ storeAsString: true, strict: true })
return jsonBig.parse(data)
} catch (err) {
return getObjType(data) === 'object' ? JSON.parse(data) : data
}
}
})
2、请求拦截器
service.interceptors.request.use(config => {
if (getToken()) {
// 获取公共的token
config.headers['token'] = store.getters.accessApp['token']
if (config.params?.operatCode) {
config.headers['operatCode'] = config.params.operatCode
delete config.params.operatCode
}
}
return config
}, error => {
Promise.reject(error)
})
3、取消拦截器
axios.interceptors.request.eject(myInterceptor);
4、相应拦截器
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.status || 200
// 获取错误信息
const message = praseStrEmpty(res.data.message) || CONSTANT.ERROR_CODE[code] || CONSTANT.ERROR_CODE['default']
// TODO 解决多个接口请求时,报错,多个提示框一起弹出
const elMessage = document.querySelectorAll('.el-message')
if (elMessage.length != 0) {
return res.data
} else {
// 处理响应码非200的情况
if (res.status != 200) {
let type = 'error'
if ([400, 404].includes(res.status)) {
type = 'warning'
}
Message({ message, type })
return Promise.reject(new Error(message))
} else {
switch (code) {
case 400:
case 404:
case 401:
case 402:
case 408:
Message({ message: `系统接口${code}异常`, type: 'warning' })
break
case 200:
return res.data
default:
Message({ message, type: 'error' })
break
}
}
}
},
error => {
const { message } = error
if (message == 'Network Error') {
Message({ message: '后端接口连接异常', type: 'error' })
} else if (message.includes('timeout')) {
Message({ message: '系统接口请求超时', type: 'error' })
}
return Promise.reject(error)
}
)
四、例子
1、 发送一个GET
请求
// 第一种:
axios.get('/user?ID=12345')
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log(err)
})
// 第二种:
axios.get('/user',{
params:{
ID:12345
}
})
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log(err)
})
// 第三种:
axios({url:'/oapi/list', params:{ID:12345} })
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log(err)
})
2、 发送一个POST
请求
// 第一种:
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log(err)
})
// 第二种:
axios({url:'/oapi/list', data:{
firstName:'Fred',
lastName:'Flintstone'
}})
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log(err)
})
3、 一次性并发多个请求
const reqs = ['/user/hhjkj','/user/kll/permissions'].map(e => axios.get(e))
axios.all(reqs)
.then(axios.spread((acct,perms)=>{
// 当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
并发请求(concurrency),即是帮助处理并发请求的辅助函数
//iterable是一个可以迭代的参数如数组等
axios.all(iterable)
//callback要等到所有请求都完成才会执行
axios.spread(callback)
4、axios api
请求方式的别名,这里对所有已经支持的请求方式都提供了方便的别名
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
五、取消
- 通过一个
cancel token
来取消一个请求
1、通过CancelToken.source
工厂函数来创建一个cancel token
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/dddd',{
cancelToken: source.token
}).catch((thrown)=>{
if(axios.isCancel(thrown)){
console.log('Request canceled',thrown.message);
}else {
//handle error
}
});
//取消请求(信息的参数可以设置的)
source.cance("操作被用户取消");
2 、给cancelToken
构造函数传递一个executor function
来创建一个cancel token
var cancelToken = axios.CancelToken
var cance
axios.get('/user/fdsdfsd',{
cancelToken: new CancelToken((c)=>{
// 这个executor函数接受一个cancel function作为参数
cancel = c
})
})
//取消请求
cancel()