安装插件

使用pnpm or cnpm or cnpm安装axios插件

1
npm install axios

创建封装请求的Ts或Js文件

在src文件夹下的utils文件夹下创建一个request.ts文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 进行axios 二次封装 使用请求与响应器来截
import axios from 'axios';
import { ElMessage } from 'element-plus';
import useUserStroe from '@/store/modules/user';

// 1、利用axios对象的create方法 创建axios 实例 （可以配置其他的配置）
let request = axios.create({
  // 基础路径
  baseURL: import.meta.env.VITE_APP_BASE_API, //基础路径上会携带/api
  timeout: 5000 // 超时时间
});

// 2.第二步 request 实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
  //获取用户相关的小仓库 获取仓库的token 登录成功后携带给服务器
  const userStore = useUserStroe();
  if (userStore.token) {
    config.headers.token = userStore.token;
  }
  // config 配置对象, header属性请求头经常给服务器端携带公共参数
  // 返回配置对象
  return config;
})

// 3. 响应拦截器
request.interceptors.response.use((response) => {
  // 成功回调
  // 简化数据
  return response.data
}, (error) => {
  // 失败的回调 处理http网络错误
  // 定一个变量 存储网络信息
  let message = '';
  // http状态码
  let status = error.response.status;
  switch (status) {
    case 401:
      message = 'TOKEN过期'
      break;
    case 403:
      message = '无权访问'
      break;
    case 404:
      message = '请求地址错误'
      break;
    case 500:
      message = '服务器错误'
      break;
    default:
      message = '网络出现错误'
      break;
  }
  ElMessage({
    type: 'error',
    message
  })
  return Promise.reject(error)
})

// 对外暴露
export default request;

使用封装后的请求

1
2
3
4
5
6
7
8
9
//统一管理用户相关的接口
import request from "@/utils/request";

enum API {
  LOGIN_URL = '/admin/acl/index/login',
}
// 登录接口
export const login = (data: loginFomData) => request.post<any, loginResponseData>(API.LOGIN_URL, data);

在需要使用接口的页面引入

1
2
3
4
5
6
7
8
9
10
// 引用接口
import { login } from "@/api/user";

// 用户登录的方法
async userLogin(data: loginFomData) {
  // 用户登录请求
  let result: loginResponseData = await login(data);
  if (result.code === 200) {
  } else {}
},