Ts封装Axios

最新推荐文章于 2024-05-20 13:57:28 发布
最新推荐文章于 2024-05-20 13:57:28 发布
阅读量968 收藏 10
点赞数 22
文章标签： typescript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hu560231/article/details/136466886
版权

axios拦截器可以让我们在项目中对后端http请求和响应自动拦截处理，减少请求和响应的代码量，提升开发效率同时也方便项目后期维护。在请求响应的interceptors(因特塞泼特斯).这个里面的话.他分为请求拦截器和响应拦截器,请求拦截器里面一般在请求头里面携带token值.响应拦截器里面对状态码的判断.比方说返回401的时候就是token没权限.跳转到登录界面。

封装axiso首先下载

npm install axios

创建文件夹request，在文件夹中创建index.ts文件名，开始对axios进行手动封装封装 或 官网复制粘贴拦截器(https://www.axios-http.cn/docs/interceptors)

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

  3. 请求拦截，分别包含请求成功 和 请求错误两个函数

    1. 执行时机为：发起请求时，请求还没有发送出去时执行 请求拦截
    2. 请求成功：请求头携带token
    3. 请求错误：发生错误请求时，可以处理 4 开头的错误

  4. 响应拦截，分别包响应成功 和 响应失败两个函数

    1. 执行时机为：请求结束后，服务器有响应的时候执行
    2. 响应成功：返回状态码为2xx(200...)携带的数据
    3. 响应失败：响应失败/错误时，可以对 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[''] = "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)
}

模拟请求

// 引入封装好的 get post 请求方法
import {get,post} from "./methods"

// 模拟一个请求接口
export const getLogin = (data) =>{
    return get({
        url:"请求的路径",
        data:data // 传递参数
    })
}

最后只需要在组件内调用 getLogin 这个方法即可。

更详细的封装

/**
 * 
 * axios
 * 
 * 封装 axios 逻辑
 * 1.下载依赖
 * 2.创建文件
 * 3.导入/引入 axios
 * 4.添加默认配置
 * 5.定义返回的数据类型
 * 6.添加拦截器
 * 7.封装请求方法
 * 8.导出/抛出 实例
 * 
 * 
 * 1.AxiosInstance 
 *   表示：
 *       axios 实例的配置项 url 方法 headers 参数
 * 2.AxiosRequestConfig
 *   表示：
 *      axios 实例的类型
 * 3.AxiosResponse 
 *   表示：
 *      axios 响应的数据结构 状态码 响应头 响应数据
 * 4.AxiosError
 *   表示:
 *      axios 请求发生错误的错误对象 错误信息  请求配置
 * 5.InternalAxiosRequestConfig
 *   表示：
 *      扩展了 AxiosRequestConfig 接口
 * 
 */

// 导入
import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig, AxiosError, InternalAxiosRequestConfig } from 'axios';

// 默认配置 实例化
const instance: AxiosInstance = axios.create({
    baseURL: import.meta.url || "", //设置api 的基本路径 相当于 默认的根目录
    timeout: 5000, //请求时长
})

// 请求拦截器
instance.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        // 
        return config;
    },
    // 请求地址错误
    (error: AxiosError) => {
        return Promise.reject(error);
    }
)

// 响应拦截器
instance.interceptors.response.use(
    (response: AxiosResponse) => {
        // 判断
        if (response.status === 200) {
            return response.data
        } else {
            // 如果响应状态码不是 200 返回一个拒绝的 Promise
            // Promise 三个状态 分别 成功，失败，进行中
            return Promise.reject()
        }
    },
    (error: AxiosError) => {
        // return Promise.reject(error);
        throw new Error("Http Error: " + error)
    }
)

// 导出
export default instance

// 定义结果 接口的 result 
// unknown 未知类型
export interface Result<T = unknown> {
    message: string;
    code: number;
    data: T;
    [key: string]: any; // 其他任意类型
}

// 请求结果的类型 Result

/* 
    定义一个名为Result的接口 默认类型为 泛型T unknown 未知类型
        接口是一种用户描述对象结构的类型
    接口的属性都有
        message：字符串类型，代表结果的消息信息
        code：数字类型，代表结果的状态
        data：泛型类型T, 代表结果的数据 默认为 unknown 类型
        [key:string]:any：索引签名，代表接口可以具有任意数量的其他属性，属性名为字符串类型，属性值为任意类型
            
    PS:
        通过定义这个接口，我们可以在代码中使用Result类型来表示一个具有特定结构的结果对象。
        例如，可以使用Result<number>来表示一个具有数字类型数据的结果对象。
*/



// 定义结果接口的result
export interface Result<T = unknown> {
  message: string;
  code: number;
  data: T;
  [key: string]: any; // 其他的任意类型
}
// axios.get("xxxx", { params: {} });
export const http = {
  get<T = any>(url: string, params?: object): Promise<Result<T>> {
    console.log(params);

    return service.get<T, Result<T>>(url, { params });
  },
  post<T = any>(url: string, data?: object): Promise<Result<T>> {
    return service.post<T, Result<T>>(url, data);
  },
  put<T = any>(url: string, data?: object): Promise<Result<T>> {
    return service.put<T, Result<T>>(url, data);
  },
  delete<T = any>(url: string, data?: object): Promise<Result<T>> {
    return service.delete<T, Result<T>>(url, data);
  },
};


export const http = {
    // axios.get('xxx路径',{params:{}}) 原型
    get<T = any>(url: string, params?: object): Promise<Result<T>> {
        return instance.get<T, Result>(url, {params})
    },
    post<T = any>(url:string,data?:object): Promise<Result<T>> {
        return instance.post<T, Result<T>>(url, {data});
     },
    put<T = any>(url:string,data?:object): Promise<Result<T>> {
        return instance.put<T,Result<T>>(url, {data});
     },
    delete<T =any>(url:string,data?:object): Promise<Result<T>> {
        return instance.delete<T,Result<T>>(url, {data});
     },
}
   解析 
    这段代码是使用 TypeScript 定义的一个 HTTP 请求库的封装。这段代码主要包含两个部分，一个是 Result 接口，另一个是 http 对象。

Result 接口
    Result 接口定义了返回结果的通用结构。它包含以下属性：

    message: 字符串类型，通常用于描述操作的结果消息。
    code: 数字类型，通常用于表示操作的返回状态码。
    data: 可以是任何类型，用于存储请求返回的数据。
    [key: string]: any;: 这是一个剩余属性，意味着可以添加任何其他类型的属性。
    这个接口可以用来定义 HTTP 请求的响应格式，使得调用者可以方便地处理返回结果。

http 对象
    http 对象提供了常见的 HTTP 请求方法，并对每个方法进行了泛型参数化，使得返回结果可以灵活地适应不同的数据类型。

    get 方法：用于发送 GET 请求。它接受一个 URL 和可选的参数对象，返回一个 Promise 对象，该 Promise 在请求完成后解析为 Result 类型。调用示例：http.get<User>('/users/123').
    post 方法：用于发送 POST 请求。它接受一个 URL、一个可选的请求数据对象，返回一个 Promise 对象，该 Promise 在请求完成后解析为 Result<T> 类型，其中 T 是请求数据对象的类型。调用示例：http.post<User>('/users', userData).
    put 方法：用于发送 PUT 请求。它接受一个 URL、一个可选的请求数据对象，返回一个 Promise 对象，该 Promise 在请求完成后解析为 Result<T> 类型，其中 T 是请求数据对象的类型。调用示例：http.put<User>('/users/123', userData).
    delete 方法：用于发送 DELETE 请求。它接受一个 URL 和一个可选的请求数据对象，返回一个 Promise 对象，该 Promise 在请求完成后解析为 Result<T> 类型，其中 T 是请求数据对象的类型。调用示例：http.delete<User>('/users/123').

*** 如何调用和创建接口
    这段代码没有明确提供如何创建和实例化接口或类的具体步骤，因此无法提供关于这部分的具体说明。但通常来说，你可以使用 TypeScript 的类和接口来创建和实例化对象，然后使用这些对象的方法。例如：

    typescript
    复制代码
    import { http, Result } from './http'; // 导入 http 和 Result 接口  

    // 使用 http.get 发送 GET 请求  
    http.get<User>('/users/123').then(response => {  
        console.log(response.data); // 打印返回的用户数据  
    });
    
    
    
   详解
    /* 
        get请求方法 方法名为get
        使用了 泛型<T = any>
            默认是类型为 any(任意类型)
        
        get<T = any>(url:string,params?:object):Promise<Result = unknow>{
            return aixos.get<T,Result<T>>(url,params)
        }
    
         他接受两个参数 
            第一个是url(路径)字符串类型
            第二个是params(接受参数的)可选参数 对象类型
        get方法 返回一个promise对象
            这个对象是一个未知类型的 Result(请求结果)对象

        函数内部 调用了axios中get请求方法，同时传入了 url(字符串类型) 和 params(可选对象类型)
            内部的get请求方法也使用了泛型
                他接受两个类型参数
                    第一个类型参数是 T （any）
                    第二个类型参数是 Result<T>
                返回一个Promise对象
                    返回的Promise对象的结果可能是一个T类型的值
                    或者是一个Result<T>类型的值
                  
        总结:
            这个方法的作用是发送一个Get请求，返回一个Promise对象，
            这个Promise对象的结果是一个Result对象
                Result对象可能包含一个T类型的值，也可能是包含一个Result<T>类型的值

    */
    
    发送一个请求，默认类型泛型(any)任意类型   返回一个promise对象，接受两个参数 url(字符串类型) 和 params(可选参数类型对象)
    输入 一个aixos请求方式默认类型 泛型 或 Result 泛型 ，传递两个参数url 和 params(ps：已定义好类型))

组件内使用/调用

引入
import { http } from '@/utils/Request'

    http.get('www.baidu.com').then(res=>{
      console.log(res,'111');
    })

困惑阿三
关注
  • 22
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TypeScript实战之用TS封装Axios
军火库
09-29 2365
这是TypeScript实战的第三篇文章。前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别。今天我们再用TypeScript封装一遍Axios。希望能进一步巩固TypeScript的基础知识。说了这么多，有些小伙伴们可能有点晕了，下面笔者分享下整个axios的封装。result: T;};// 导出Request类，可以用来自定义传递配置来创建实例。
ts 简易封装 axios，统一 API
阿城的博客
11-01 2330
在通用请求方法 request 基础上封装了同名的 http 方法使用泛型可获得请求参数和请求结果的类型提示额外封装了文件上传的方法。
Typescript使用装饰器封装axios请求
最新发布
Ted_Fan的博客
05-20 431
装饰器是一项实验性特性,需要在tsconfig.json或tsconfig.app.json中开启配置。这里封装了3个修饰器,除了常规的Get 和 Post 请求,还额外加了Result,对返回值格式的处理。在语言模型中，编码器和解码器都是由一个个的 Transformer 组件拼接在一起形成的。参数装饰器参数有三个,target,methodName ,index。方法装饰器参数有三个,target,key descriptor。
使用TS对axios进行简单封装
Get_Obj的博客
03-04 631
【代码】使用TS对axios进行简单封装。
用ts封装axios
haodanzj的博客
02-06 1279
用ts封装axios
使用TS对axios的进行简单封装
热门推荐
weixin_45623596的博客
05-17 1万+
使用TS对axios的简单封装，封装之后就可以获得TS带来的类型提示。
axios-ts封装
weixin_45932463的博客
08-20 329
在ts中封装使用axios
react + ts or vue + ts 通用axios封装的方法。
07-21
3. **封装axios实例**：在`requestMode.ts`文件中，创建一个axios实例，并添加通用配置。可以在这里设置基础URL、请求超时等全局配置。 ```typescript import axios from 'axios'; const instance = axios.create...
vue+ts下对axios的封装实现
10-15
接下来，我们将创建一个名为`http.ts`的文件，用于封装axios实例。这个文件将包含基础的HTTP请求配置和逻辑。同时，为了组织代码，我们可以创建一个单独的`interceptors.ts`文件来处理拦截器的逻辑。当然，如果你更...
ts-axios:TypeScript实现axios
03-31
TypeScript库启动器 一个启动项目，使创建TypeScript库非常容易。 用法 ...cd YOURFOLDERNAME # Run npm install and write your library name when asked.... npm install 开始编码！ package.json和入口文件已经为您...
axios的ts二次封装+调用
02-02
在创建axios的ts封装时，我们需要考虑以下几点： - **类型定义**：利用TypeScript的强大类型系统，为请求方法提供明确的参数和返回值类型。 - **配置默认值**：设置默认的请求头、超时时间等配置，使开发更便捷。...
使用TS封装axios
weixin_45145454的博客
03-30 9286
一、基本封装 import axios from 'axios' import type { AxiosInstance, AxiosRequestConfig } from 'axios' class Request { // axios 实例 instance: AxiosInstance constructor(config: AxiosRequestConfig) { this.instance = axios.create(config) } request(con
TS封装axios
weixin_47768980的博客
08-18 479
ts封装axios请求
Axios 之 ts 版本的请求封装
zhenshu_guo的博客
12-28 2036
axios 封装
ts封装axios
qq_52031408的博客
04-11 454
ts封装axios
ts+axios封装
ZhangYu_010228的博客
04-03 457
对单一接口进行拦截，例如同一个实例的不同接口有不同的拦截操作，比如hyRequest2的/entire/list不进行拦截，而对hyRequest2的/home/highscore进行拦截。实例拦截器是为了保证封装的灵活性，因为每一个实例中的拦截后处理的操作可能是不一样的，所以在定义实例时，允许我们传入拦截器。这里创建两个实例：hyRequest和hyRequest2。类拦截器只需要在类中对。
使用ts封装一个Axios请求
wgh2820777641的博客
02-17 3774
使用ts封装一个axios请求
ts 封装axios
08-03
在TypeScript中封装axios可以按照以下步骤进行： 1. 首先，导入axios库并创建axios实例。可以使用import语句导入axios，并使用axios.create()方法创建一个实例。在创建实例时，可以设置一些配置，比如基础路径、请求超时时间等。这样可以确保每次请求都使用相同的配置。 ```typescript import axios, { AxiosRequestConfig } from 'axios'; const instance = axios.create({ baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/', timeout: 5000, // 其他配置 }); ``` 2. 接下来，可以封装请求函数。可以创建一个函数，接受一个AxiosRequestConfig类型的参数，并返回一个Promise实例。在函数内部，使用创建的axios实例的request方法发送请求，并根据请求结果的状态来决定Promise实例的状态。 ```typescript type Response<T = any> = { msg: string; result: T; }; export default <T>(config: AxiosRequestConfig) => { return new Promise<Response<T>>((resolve, reject) => { instance .request<Response<T>>(config) .then((response) => { resolve(response.data); }) .catch((error) => { reject(error); }); }); }; ``` 这样，就完成了在TypeScript中封装axios的过程。通过这个封装，可以方便地发送请求，并且可以获得类型提示，提高代码的可维护性和可读性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值