ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3框架搭建2：axios+typescript封装 [打印本页]
作者: 饭宝    时间: 2024-7-14 17:23
标题: Vue3框架搭建2：axios+typescript封装
堆栈地点：https://github.com/buguniao5213/LuArch
1、安装axios

  1. npm install axios
复制代码
2、创建文件

先创建一个文件夹：
  1. ├── src/
  2. │   ├── api/        
  3. │   │   ├── index.ts/   #编写axios封装代码   
  4. │   │   └── example.ts/ #定义向后端服务器发送请求的模块`
复制代码
  1. ├── publix/
  2. │   ├── json/        
  3. │   │   └── example.json/   #模拟get接口获取到的数据`
复制代码
3、导入申明

导入axios库和干系类型
  1. import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
复制代码
4、基础url定义

这个后面放到vite的缓建变量配置中（.env）
  1. const BASE_URL = '/'
复制代码
5、定义request类

要素如下：
  1. export class Request {
  2.     private instance: AxiosInstance;
  3.     private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
  4.     public constructor() {
  5.         //...   
  6.     }
  7.     public request() {
  8.         //...   
  9.     }
  10.     public get() {
  11.         //...   
  12.     }
  13.    
  14.     //...
  15.     //...
  16. }
复制代码
a）、private instance：私有属性instance:Axios实例
b）、private baseConfig：根本配置，包罗基础URL和超时时间
c）、public constructor：构造函数
创建Axios实例，合并根本配置和传入配置
设置请求拦截器：可以添加token等认证信息
设置相应拦截器：处理相应数据，根据状态码决定返回数据或报错误信息
d）、请求方法设置：
request：通用请求方法。
get：GET请求方法。
post: POST 请求方法
put: PUT 请求方法
delete: DELETE 请求方法
完整代码如下：
index.ts：
  1. export class Request {
  2.     private instance: AxiosInstance;
  3.     private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
  5.     public constructor(config: AxiosRequestConfig) {
  6.         this.instance = axios.create(Object.assign(this.baseConfig, config));
  8.         this.instance.interceptors.request.use(
  9.             (config: any) => {
  10.                 // 配置处理逻辑
  11.                 // const token = 'tokentoken';
  12.                 return config;
  13.             },
  14.             (error: any) => {
  15.                 return Promise.reject(error);
  16.             }
  17.         )
  18.         this.instance.interceptors.response.use(
  19.             (res: any) => {
  20.                 if(res.data.code === 200) {
  21.                     return res.data.data;
  22.                 }else {
  23.                     // 错误code处理
  24.                     return "发生错误";
  25.                 }
  26.             },
  27.             (error: any) => {
  28.                 return Promise.reject(error);
  29.             }
  30.         )
  31.     }
  33.     public request<T = any>(config: AxiosRequestConfig): Promise<T> {
  34.         return this.instance.request(config);
  35.     }
  37.     public get<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  38.         return this.instance.get(url, {params, ...config});
  39.     }
  41.     public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
  42.         return this.instance.post(url, data, config);
  43.     }
  45.     public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
  46.         return this.instance.put(url, data, config)
  47.     }
  49.     public delete<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
  50.         return this.instance.delete(url, {params, ...config});
  51.     }
  53. }
复制代码
6、创建实例，并导出为Axios

  1. export const Axios = new Request({
  2.     baseURL: BASE_URL,
  3. });
复制代码
7、使用

a）、封装一个HTTP请求
example.ts：
  1. import { Axios } from '@/api'
  3. export function HTLLOWORD() {
  4.     return Axios.get<any>('/json/example.json')
  5. }
复制代码
example.json：
  1. {   
  2.     "code": 200,
  3.     "data": "hello word"
  4. }
复制代码
b）、调用
  1. import { HTLLOWORD } from '@/api/example'
  3. const getTest = () => {
  4.   HTLLOWORD().then(res => {
  5.     console.log(res)
  6.   })
  7. }
  9. getTest();
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4