axios 二次封装

步骤 1：安装 axios

在你的项目中安装 axios,这是一个基于promise的HTTP客户端,用于浏览器和node.js：

1pnpm add axios

步骤 2：创建axios实例

在 utils 目录下创建 request.ts 文件,配置axios实例和拦截器：

1/**
2 * axios 二次封装
3 * https://www.npmjs.com/package/axios
4 */
5import axios from "axios";
6
7// 创建 axios 实例
8let request = axios.create({
9  baseURL: "/api",
10  timeout: 8000,
11});
12
13// 请求拦截
14request.interceptors.request.use(
15  (request) => {
16    // 在请求发送之前做一些事情,例如设置token
17    const token = localStorage.getItem("token");
18    if (token) {
19      request.headers["Authorization"] = `Bearer ${token}`;
20    }
21    return request;
22  },
23  (error) => {
24    // 在请求失败时做一些事情
25    return Promise.reject(error);
26  }
27);
28
29// 响应拦截
30request.interceptors.response.use(
31  (response) => {
32    // 任何处于2xx范围内的状态码都会触发此函数
33    // 对响应数据做一些事情
34    return response.data;
35  },
36  (error) => {
37    // 任何超出2xx范围的状态码都会触发此函数
38    // 在响应失败时做一些事情
39    return Promise.reject(error);
40  }
41);
42
43// 对外暴露
44export default request;

API接口统一管理

用户相关接口管理

在 api/user目录下创建 index.ts 文件,统一管理用户相关的接口请求：

1import request from '@/utils/request'
2import { ILoginReq, ILoginRes } from './type'
3// 统一管理接口
4enum API {
5  LOGIN_URL: '/user/logins'
6}
7
8// 暴露请求函数
9export const reqLogin = (data: ILoginReq): ILoginRes => request.post(API.LOGIN_URL, data)

定义接口请求和响应类型

在 api/user 目录下创建 type.ts 文件,用于定义登录接口需要携带的参数类型和返回的参数类型：

1// 登录接口需要携带的参数类型
2export interface ILoginReq {
3  username: string,
4  password: string 
5}
6
7interface dataType {
8  token: string
9}
10// 登录接口返回的参数类型
11export interface ILoginRes {
12  code: number,
13  data: dataType
14}

配置代理

在使用 Vite 开发应用时,你可能需要配置代理以解决本地开发环境中的跨域请求问题。以下是如何在 vite.config.ts 中配置代理的步骤：

步骤 1：编辑 vite.config.ts

在项目的 vite.config.ts 文件中,配置开发服务器的代理设置：

1import { defineConfig } from 'vite';
2
3export default defineConfig({
4  server: {
5    proxy: {
6      '/api': {
7        target: 'http://localhost:3000', // 后端服务器地址
8        changeOrigin: true, // 是否改变请求头中的Origin字段
9        rewrite: (path) => path.replace(/^\/api/, ''), // 重写请求路径
10      },
11    },
12  },
13});

配置说明

target：指定你的后端服务器地址。所有匹配 /api 的请求将被代理到这个地址。
changeOrigin：设置为 true 可以避免 CORS（跨源资源共享）问题,因为它会修改请求头中的 Origin 字段。
rewrite：一个函数,用于重写请求路径。这里我们将路径中的 /api 前缀替换为空,这样代理的请求就会匹配后端服务器的根路径。

步骤 2：使用代理

配置完成后,你可以在项目中通过 /api 前缀来访问后端接口。例如,如果你有一个后端接口 http://localhost:3000/users,你可以在前端代码中这样请求：

1fetch('/api/users').then(response => response.json());

这个请求会被 Vite 代理到 http://localhost:3000/users。

axios 二次封装#

API接口统一管理#

配置代理#

axios 二次封装

API接口统一管理

配置代理