TypeScript封装axios——基本封装与拦截器精细控制

最新推荐文章于 2024-04-22 10:54:08 发布

qq_40329965

最新推荐文章于 2024-04-22 10:54:08 发布

阅读量770

点赞数

分类专栏： Typescrtpt学习文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_40329965/article/details/128478559

版权

本文详细介绍了如何使用TypeScript封装axios，包括基本封装步骤、全局拦截器配置、为特定Request实例配置拦截器，以及如何在同一个实例中为不同请求设置不同拦截器。通过实例代码展示了具体实现方法。

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

1、基本封装

封装一个Request的类，使得在外部可以调用此类的构造函数创建实例，创建的实例就对应axios实例，request/index.ts中代码如下：

import axios, {
    AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

class HDRequest {
   
  // 创建这个类的目的：每个创建出的HDRequest的实例都对应一个axios实例

  // 创建实例的方法：constructor()构造实例
  instance: AxiosInstance;
  constructor(config: AxiosRequestConfig) {
   
    this.instance = axios.create(config);
  }

  // 二次封装网络请求的方法
  request(config: AxiosRequestConfig) {
   
    return this.instance.request(config);
  }
}

export default HDRequest;

基本配置信息单独写在一个文件中，config/index.ts中代码如下：

export const BASE_URL = "http://codercba.com:8000";
export const TIME_OUT = 5000;

在service/index.ts中创建一个Request类的一个实例，并配置这个实例：

import HDRequest from "./request";
import {
    BASE_URL, TIME_OUT } from "./config/index";

const hdRequest = new HDRequest({
   
  baseURL: BASE_URL,
  timeout: TIME_OUT,
});

export default hdRequest;

在moduleds/home.ts中使用这个实例进行request：

import hdRequest from "..";

hdRequest
  .request({
   
    url: "/home/multidata",
  })
  .then((res) => {
   
    console.log(res.data);
  });

2、配置全局拦截器

request/index.ts

import axios, {
    AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

class HDRequest {
   
  // 创建这个类的目的：每个创建出的HDRequest的实例都对应一个axios实例

  // 创建实例的方法：constructor()构造实例
  instance: AxiosInstance;
  constructor(config: HDRequestConfig) {
   
    this.instance = axios.create(config);

    // 添加全局拦截器，每个实例都有
    this.instance.interceptors.request.use(
      (config) => {
   
        console.log("全局请求成功的拦截");
        return config;
      },
      (err) => {
   
        console.log(