axiso封装

简介

axios拦截器能够让咱们在我的项目中对后端http申请和响应主动拦挡解决，缩小申请和响应的代码量，晋升开发效率同时也不便我的项目前期保护。在申请响应的interceptors(因特塞泼特斯).这个外面的话.他分为申请拦截器和响应拦截器,申请拦截器外面个别在申请头外面携带token值.响应拦截器外面对状态码的判断.比方说返回401的时候就是token没权限.跳转到登录界面。

封装axiso首先下载

npm install axios

创立文件夹request，在文件夹中创立index.ts文件名，开始对axios进行手动封装封装

1. 首先引入下载好的aixos
2. 创立实例

3. 申请拦挡，别离蕴含申请胜利 和 申请谬误两个函数

   • 执行机会为：发动申请时，申请还没有发送进来时执行 申请拦挡
   • 申请胜利：申请头携带token
   • 申请谬误：产生谬误申请时，能够解决 4 结尾的谬误
   • 响应拦挡，别离包响应胜利 和 响应失败两个函数

4. 执行机会为：申请完结后，服务器有响应的时候执行

   • 响应胜利：返回状态码为2xx(200…)携带的数据
   • 响应失败：响应失败/谬误时，能够对 5 结尾的状态码进行解决、 * 申请超时、谬误状态码的解决。
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 = (data:dataType)=>{
    // 定义post申请办法
    data.method = "POST"
    // 返回
    return install(data)
}