typescript 二次封装 axios轮子

最新推荐文章于 2024-10-01 20:46:45 发布

热带雨林的竹笋

最新推荐文章于 2024-10-01 20:46:45 发布

阅读量1.3k

点赞数 4

分类专栏： javascript+vue+typescript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_51710069/article/details/122281535

版权

本文介绍了如何使用TypeScript对axios进行二次封装，强调了TypeScript在编译期间进行数据类型检查的优势，避免运行时错误。通过创建核心类(core.ts)、导出类(index.ts)和类型定义(types.ts)来规范化代码。讲解了泛型接口AxiosResponse的使用，特别是泛型参数T的作用，帮助指定返回数据的类型。

摘要由CSDN通过智能技术生成

typescript和java很多类似的地方，javaScript 只会在运行时才去做数据类型检查，而 TypeScript 作为静态类型语言，其数据类型是在编译期间确定的，编写代码的时候要明确变量的数据类型。使用 TypeScript 后，这些低级错误将不再发生。规范后用起来很舒服，能轻易知道自己错在哪。下面就是axios的二次封装。
为了代码规范化

首先在路径下utils/http 文件下需要三个ts分步文件 core.ts (核心类的封装) index.ts（到处类的封装） types.ts（所用到的类型封装）
在这里插入图片描述
首先核心类的封装（core.ts）


import axios from 'axios'
import {
    AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from 'axios'
import {
    IResponseData, codeMessage } from './types';
import {
   successMessage,errorMessage} from '../messageTips'

class Http {
   
    private service: AxiosInstance
    //    构造器
    constructor(config: AxiosRequestConfig) {
   
        //    创造实例
        this.service = axios.create(config)
        // 首先配置响应拦截
        this.service.interceptors.request.use((config: AxiosRequestConfig) => {
   
            /**
             * 实现自己的业务逻辑
             * 1.开启全屏加载动画之类
             * 2.数据加密config。data
             * 3.给请求头添加信息等（token 结合sessionStorage，localStorage,vuex这些）
             * 
             */
            return config

        }, error => {
   

            /* 请求错误的业务逻辑
             1. 关闭全屏loading动画
             2. 重定向到错误页
           */
            return Promise.reject(error)// 为了可以在代码中catch到错误信息
        })//end request.use

        this.service.interceptors.response.use((response: AxiosResponse) => {
   
            /* 
          1. 关闭全屏loading动画
          2. 数据解密
          3. 根据 response.data.code 做不同的错误处理
          4. ……
          */
            const data = response.data
            const {
    code } = data//解构赋值

最低0.47元/天解锁文章