vue 对axios二次封装，配置api层，基于mock测试数据

一、初始化环境（默认都会安装vue3项目+ts）

安装mock：全局安装

cs 复制代码

# 使用 npm 安装
npm install mockjs vite-plugin-mock
# 使用 yarn 安装
yarn add mockjs vite-plugin-mock

二、进行配置

在vite.config.ts中进行配置

cs 复制代码

import { UserConfigExport, ConfigEnv } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';

//command 是用于检测当前开发的环境
export default defineConfig(({command}:ConfigEnv):UserConfigExport=>{
	return {
		plugins: [
			//mock配置
             //localEnabled已经弃用，现在用enable
			    viteMockServe({
                 mockPath:'mock',
                enable: command=='serve'
      }),
		],
	}
}）

三、开始使用

1.在根目录下创建mock目录（如果要起别的名字，对应上边vite.config.ts中mockPath也要做相应修改）。

2.在mock目录下创建文件，创建user.js (根据自己具体需求去取名)，根据需求写几个接口路径，例子如下：

user.ts内容：

html 复制代码

function createUserList() {
    return [
        {
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}
//对外暴露接口
export default [
    // 用户登录接口
    {
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: { token } }
        },
    },
    // 获取用户信息
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
                return { code: 201, data: { message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return { code: 200, data: { checkUser } }
        },
    },
]

好了其实里面的内容看起来很难，其实一点也不简单，要细心理解一下

就是定义一个createUserList()函数，直接返回数据集而已，然后

//对外暴露接口 export default，请求的根据就是，url、method、和response中的body参数

就像请求后端一样，在response中的{}中类似方法体，定义参数 const { username, password } =

body;，并且写一下简单的判断业务，就是判断密码是否和createUserList函数中的数据一样，这是

一个简单的登录业务。~~

四、axios二次封装 request.ts

html 复制代码

import axios from "axios";
import { ElMessage } from "element-plus";
//创建了一个axios对象

// alert(import.meta.env.VITE_APP_BASE_API);
const request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000,
});
let userStore:any = null
let token =null;
//request实例添加请求响应拦截器
request.interceptors.request.use((config) => {

  token = localStorage.getItem('userToken');
console.log('toekn',token);
  if(token!=null){
      // 设置请求头token
    config.headers.token = token;
  }
 //config配置对象，header属性配置请求头，经常给服务器端携带公共参数
  //返回配置对象
  // console.log(config);
  return config;
});

//响应拦截器
request.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    //处理网络错误
    //失败调回
    //定义一个变量处理网络错误
    let msg = "";
    let status = error.response?.status || error.code;
    switch (status) {
      case 401:
        msg = "token过期";
        break;
      case 403:
        msg = "无权访问";
        break;
      case 404:
        msg = "请求地址错误";
        break;
      case 500:
        msg = "服务器出现问题";
        break;
      case "ECONNABORTED":
        msg = "请求超时";
        break;
      default:
        msg = "无网络";
        break;
    }
    ElMessage({
      type: "error",
      message: msg,
    });
    return { code: status, message: msg };
  }
);

//对外暴露
export default request;

baseURL: import.meta.env.VITE_APP_BASE_API是设置axios的一个基础路径，

import.meta.env：读取.env数据，方便切换开发和生产环境的后端服务路径

.env.development：中的变量为：

html 复制代码

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
# VITE_NODE_ENV = 'development'
VITE_APP_TITLE = '开发中 • 硅谷甄选'

#可用来区分同个域名下不同地址
VITE_APP_BASE_API = '/api' #//基础路径会携带/api
# VITE_APP_DOMAIN = 'http://sph-api.atguigu.cn'
VITE_SERVE="http://xxx.com"

这里读取的是：VITE_APP_BASE_API:'/api'

因为是mock本地测试数据，所以不用再添加本地连接默认请求本地地址。

五、创建api管理文件（ts文件）

虽然使用requts.ts可以直接请求，但是为了这篇文章的很多东西可以直接粘贴用，所以还是严谨一点。

创建src/api/user/index1.ts文件

src/api/user/type1.ts文件

index1内容：

html 复制代码

//统一管理项目用户相关接口
import  request from '@/utils/request';
// loginFormData形参类型
import type { loginFormData,loginResultData,userInfoResultData } from './type1';

enum API{
    LOGIN_URL="/user/login",
    UUSERINFO_URL="/user/info"
}
//暴露请求函数
//登录接口方法
export const reqLogin =(data:loginFormData)=>request.post<any,loginResultData>(API.LOGIN_URL,data);

// 用户信息
export const reqUserInfo =()=> request.get<any,userInfoResultData>(API.UUSERINFO_URL);

type1内容：

//登录接口需要携带ts参数类型

export interface loginFormData{
    username:string,
    password:string
}

interface dataType{
    token:string
}
//登录接口返回参数
export interface loginResultData{
    code:any,
    data:any
}

interface userInfo{
    userId:number,
    avatar:string,
    username:string,
 password:string,
 desc:string,
 roles:string[],
 bottons:string[],
 routes:string[],
 token:string
}
interface user{
    checkUser:userInfo
}
// 定义获取用户信息接口返回的数据
export  interface  userInfoResultData{
    code:number,
    data:user
}

这里improt：引入request、type1 这里type1是配置接口中的参数，里面是对mock返回的数据节奏来定义的参数结构，反正太难的结构就用any来定义

enum API，写的是url， export 把定义的管理api方法暴露出去。

六、调用api接口文件

在app.vue文件引入接口管理文件。

import {reqLogin,reqUserInfo} from '@/api/user/index1';

使用onMounted函数调用接口

//使用api管理接口是否能使用
//登录接口
onMounted(()=>{
  reqLogin({username:'admin',password:'111111'}).then(res=>{

    console.log('toeknset',res);
    if(res.code==200){
      //将token存储到本地缓存中
      localStorage.setItem('userToken',res.data.token);
    }
    console.log('成功！');
  })
})
//获取用户信息
onMounted(()=>{
  reqUserInfo().then(res=>{
    console.log(res);
  })
})

查看控制台成功了！