引入

在vue的项目中，我们常常使用axios进行请求发送，这里我们简单的封装一下

axios官网

demo项目地址

1.引入依赖

 npm install axios

2.封装通用请求工具类

我们在src下新建utils目录，然后创建一个request.ts

• 这里我们直接参考 vue3-element-admin对请求的封装

// src\utils\request.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { useUserStoreHook } from '@/store/modules/user';

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
});

// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const userStore = useUserStoreHook();
    if (userStore.token) {
      config.headers.Authorization = userStore.token;
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { code, msg } = response.data;
    if (code === '00000') {
      return response.data;
    }
    // 响应数据为二进制流处理(Excel导出)
    if (response.data instanceof ArrayBuffer) {
      return response;
    }

    ElMessage.error(msg || '系统出错');
    return Promise.reject(new Error(msg || 'Error'));
  },
  (error: any) => {
    if (error.response.data) {
      const { code, msg } = error.response.data;
      // token 过期,重新登录
      if (code === 'A0230') {
        ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          localStorage.clear();
          window.location.href = '/';
        });
      } else {
        ElMessage.error(msg || '系统出错');
      }
    }
    return Promise.reject(error.message);
  }
);

// 导出 axios 实例
export default service;

3.api案例

我们在src下新建一个api目录，里面新建一个auth目录，并创建index.ts和types.ts两个文件

// src\api\auth\index.ts
import request from '../../utils/request';
import { AxiosPromise } from 'axios';
import { LoginData, LoginResult } from './types'

/**
 * 登录API
 *
 * @param data {LoginData}
 * @returns
 */
export function loginApi(data: LoginData): AxiosPromise<LoginResult> {
  return request({
    url: '/auth/login',
    method: 'post',
    params: data
  });
}

// src\api\auth\types.ts
/**
 * 登录请求参数
 */
export interface LoginData {
  /**
   * 用户名
   */
  username?: string;
  /**
   * 密码
   */
  password?: string;
}

/**
 * 登录响应
 */
export interface LoginResult {
  /**
   * 访问token
   */
  accessToken?: string;
}

4.测试代码

1.接着我们在HelloWorld.vue中添加一个按钮，并绑定点击事件发送一个登录请求：

<script setup lang="ts">
import { loginApi } from '../api/auth'

function login() {
  loginApi({ username: 'lzp', password: '666' }).then(res => {
    console.log(res);
  });
}
</script>

<template>
  <ul>
    <li>
      <el-button type="primary" @click="login">登录请求</el-button>
    </li>
  </ul>
</template>

2.接着我们可以去 https://www.fastmock.site/#/网站创建一个在线api模拟，大家也可以直接请求我的模拟api:

https://www.fastmock.site/mock/da142e3dbc6e2fcd1fab5c3d0dd789bf/electron-vue3

3.我们添加一个登录的模拟接口：

4.接着我们调整request.ts里面的baseUrl：

// 创建 axios 实例
const service = axios.create({
  baseURL: 'https://www.fastmock.site/mock/da142e3dbc6e2fcd1fab5c3d0dd789bf/electron-vue3',
	// ...
});

5.演示效果如图所示：