简介
axios拦截器可以让我们在项目中对后端http请求和响应自动拦截处理，减少请求和响应的代码量，提升开发效率同时也方便项目后期维护。在请求响应的interceptors(因特塞泼特斯).这个里面的话.他分为请求拦截器和响应拦截器,请求拦截器里面一般在请求头里面携带token值.响应拦截器里面对状态码的判断.比方说返回401的时候就是token没权限.跳转到登录界面。
封装axiso首先下载
npm install axios创建文件夹request，在文件夹中创建index.ts文件名，开始对axios进行手动封装封装
- 首先引入下载好的aixos
- 创建实例
请求拦截，分别包含请求成功 和 请求错误两个函数
- 执行时机为：发起请求时，请求还没有发送出去时执行 请求拦截
- 请求成功：请求头携带token
- 请求错误：发生错误请求时，可以处理 4 开头的错误
- 响应拦截，分别包响应成功 和 响应失败两个函数
执行时机为：请求结束后，服务器有响应的时候执行
- 响应成功：返回状态码为2xx(200...)携带的数据
- 响应失败：响应失败/错误时，可以对 5 开头的状态码进行处理、 * 请求超时、错误状态码的处理。
- 导出封装好的axios
手动封装axios代码详情
// 引入axios
import axios from axios
// 进度条和样式
import nProgress from "nprogress" // npm install nprogress
import "nprogress/nprogress.css"
// 实例化axios
const install = axios.create({
// 请求地址的前缀 公共全局的URL
baseURL:"",
// 请求时长 --- 超出定义的时长，请求超时
timeout:5000
})
// 请求拦截
install.interceptors.request.use(
(config)=>{
// 开始进度条
nProgress.start()
// 获取token
const token = localStorge.getItem('token')
// 请求头携带token
config.headers.Authorization = 'Bearer ' + token
return config
},
(error)=>{
return Promise.reject(error)
}
)
// 响应拦截
install.interceptors.response.use(
(response)=>{
// 响应成功关闭进度条
nProgress.done()
// 返回响应的数据
return response
},
(error)=>{
// 请求超时处理
if(error.message.includes('timeout')){
alert('请求超时')
return;
}
// 不同错误状态码处理
const code = error.response.status;
switch(code){
case 400:
console.log('请求错误');
break;
case 401:
console.log('未授权');
break;
case 403:
console.log('禁止访问');
break;
case 404:
console.log('页面消失');
break;
case 500:
console.log('服务器内部错误');
break;
case 502:
console.log('网关错误');
break;
}
return Promise.reject(error)
}
)
// 导出封装好的aixos以上是axios两次封装，我们还可以将他们的请求方式也封装一下，比如在同文件夹内新建一个methods.ts文件，然后如下代码
// 引入封装好的axios
import install from "./index"
// 定义任意类型接口
interface anyType{
[key:string]:any | (string|number)
}
// 定义类型接口
interface dataType{
url:string, // 路径
method?:string, // 请求方法 get / post...
headers?:anyType, // 请求头
params?:anyType, // get请求携带参数用的
data?:anyType, // post请求携带参数用的
}
// 创建 get 请求方法
export const get = (data:dataType)=>{
// 定义请求方法
data.method = "GET"
// 返回
return install(data)
}
// 创建post请求方法
export const post = (data:dataType)=>{
// 定义post请求方法
data.method = "POST"
// 返回
return install(data)
}
