Vue中axios封装 支持Fast Mock在线模拟接口

Vue中axios封装 支持Fast Mock在线模拟接口

1. 创建Mock接口

​ Fast Mock官网地址：https://www.fastmock.site/。

​ 注：本文旨在讲如何在Vue中封装axios以支持Mock接口。所以具体如何使用Fast Mock创建模拟接口以及Mock.js语法，请自行百度学习。

2. axios封装

1. 环境配置封装config.js

   /**
    * 环境配置封装
    */
   
   // 通过env.MODE获取当前运行环境
   const env = import.meta.env.MODE || 'prod';
   
   const EnvConfig = {
       dev:{
           baseApi:'开发环境地址',
           mockApi:'开发Mock环境地址'
       },
       test:{
           baseApi:'测试环境地址',
           mockApi:'测试环境Mock地址'
       },
       prod:{
           baseApi:'生产环境地址',
           mockApi:'生产环境Mock地址'
       }
   }
   
   // 导出配置
   export default {
       env,
       mock:false,   // Mock是否启用 全局开关
       ...EnvConfig[env]   // 动态导出当前环境下的接口配置
   }
   

2. axios封装

   /**
    * axios二次封装
    */
   
   import axios from 'axios'
   import config from './../config'   //第1步中封装的config.js
   import { ElMessage } from 'element-plus'
   import router from './../router'  //自己项目中配置的router
   import storage from './storage'   //自己项目中配置的vuex
   
   // 定义的错误信息常量
   const TOKEN_INVALID = 'Token认证失败，请重新登录'
   const NETWORK_ERROR = '网络请求异常，请稍后重试'
   
   // 创建axios实例对象，添加全局配置
   const service = axios.create({
       // baseURL: config.baseApi,
       timeout: 8000
   })
   
   // 请求拦截
   service.interceptors.request.use((req) => {
       const headers = req.headers;
       // 由于本人当前项目需要 通过vuex中获取token写入请求头。
       // 使用中可以依据你所在项目情况而定
       const { token } = storage.getItem('token'); 
       if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
       return req;
   })
   
   // 响应拦截
   service.interceptors.response.use((res) => {
       const { code, data, msg } = res.data;
       //当前项目定义code 200表示请求成功  401表示认证失败
       if (code === 200) {
           return data;
       } else if (code === 401) {
           ElMessage.error(TOKEN_INVALID)
           setTimeout(() => {
               // 错误信息展示2秒后 自动跳转登录页
               router.push('/login')
           }, 2000)
           return Promise.reject(TOKEN_INVALID)
       } else {
           ElMessage.error(msg || NETWORK_ERROR)
           return Promise.reject(msg || NETWORK_ERROR)
       }
   })
   
   
   /**
    * 请求核心函数
    * @param {*} options 请求配置
    */
   function request(options) {
       options.method = options.method || 'get'
       if (options.method.toLowerCase() === 'get') {
           options.params = options.data;
       }
       let isMock = config.mock;
       if (typeof options.mock != 'undefined') {
           isMock = options.mock;
       }
       
       // 对当前环境进行二次判断 防止生产环境调用了测试环境接口
       if (config.env === 'prod') {
           service.defaults.baseURL = config.baseApi
       } else {
           service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
       }
   
       return service(options)
   }
   
   /**
    *  二次封装 方便直接通过request.method的方式调用 
    */
   ['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
       request[item] = (url, data, options) => {
           return request({
               url,
               data,
               method: item,
               ...options
           })
       }
   })
   
   export default request;
   
   

3. 在封装的Api接口中调用

import request from './../utils/request'

// 方式一
const login = (data) => {
    return request({
        url:"/user/login",
        method:"post",
        data,
        mock:true
    })
}

// 方式二
const login2 = (data) => request.post("/user/login",data,{mock:true});

export default {
    login,
    login2
}

4. 在具体业务中使用

 this.$api.login(this.user).then((res) => {
     console.log(res)
 }).catch(e => {
     console.error(e);
 })