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 post = (data:dataType)=>{
    // 定义post请求方法
    data.method = "POST"
    // 返回
    return install(data)
}