关于javascript: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)
}