一、简介

在业务中会涉及到请求拦截的情况，这里主要以axios为例，展示request里面的业务逻辑；

二、环境准备

webpack + vue3 + axios + qs + js-cookie + elementPlus

三、具体代码

1，步骤一：文件准备

在src文件夹下新建utils文件夹；

新建request.js；

新建 auth.js；

新建 index.js；

2，步骤二：编写代码

（1）auth.js代码：

import Cookies from 'js-cookie' //记得下载js-cookie依赖

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

（2）request.js 代码

• 创建实例

import axios from "axios";
import qs from 'qs'
import { ElMessage} from 'element-plus'
import {getToken} from './auth'

//创建实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000, // request timeout
  responseType: "json",
  withCredentials: true, // 跨域请求是否要携带cookie
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
  },
});

• 请求拦截器

//请求拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?' + config.params;
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    //post、put请求映射参数
    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
      const requestObj = {
        url: config.url,
        data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
        time: new Date().getTime()
      }
      console.log('requestObj',requestObj);
    }
    return config;
  },
  (error) => {
    ElMessage.error('操作失败！',error)
    return Promise.reject(error);
  }
);

• 请求方法

function request(options) {
  // options就是请求地址的一些参数
  // console.log('request', options);
  // 设置options参数,有方法就使用方法,没有就使用get方法
  options.method = options.method || "get";
  // 将请求的字符串变成小写toLowerCase()
  if (options.method.toLowerCase() == "get") {
    //  将参数params的数据设置给data
    // options.data = options.params;
  }else if(options.method.toLowerCase() == "post"){
    options.data = qs.stringify(options.data)
  }
  // 单个接口对mock的处理,定义一个mock布尔值
  // let isMock = config.mock;
  // 如果接口自带mock,则将原本总接口的mock覆盖做某个单独接口的mock(决定是否进行拦截处理,后端接口数据完成那也就没必要进行拦截了，直接使用后端接口数据)
  // if (typeof options.mock !== "undefined") {
  //   isMock = options.mock;
  // }
  // 对线上环境做处理
  // if (config.env == "prod") {
  //   // 不给使用mock的机会,如果是生产环境则转接到开发环境防止产生严重bug(还在使用mock也就不太可能已经完善了项目)
  //   service.defaults.baseURL = config.baseApi;
  // } else {
  //   // 不是生产环境就判断mock布尔值来确定是够需要进行拦截
  //   service.defaults.baseURL = isMock ? config.mockApi : config.baseApi;
  // }
  // 当调用request时携带参数,根据参数发起相对应的请求返回数据
  // request就是返回了一个带有mock等数据的axios请求示例对象
  return service(options);
}

• 导出request方法 export default request

（3）index.js代码

导出两个文件

import request from './request'
import auth from './auth'
export default {
  request,
  auth
}

3，在api里就可以把axios换成request方法就可以了

import request from '../utils/request.js'
import {ElMessage} from 'element-plus'
//请求表格数据
const getData = (url, data)=>{
  return request({
    method:'post',
    url:url,
    data:data
  }).then(
    res => {
      return res.data
    },
    error => {
      ElMessage({
        type:'error',
        message:error.message,
        showClose: true
      })
    }
  )
}
export default getData

四、总结

至此大功告成，如果后续有权限管理等验证需要，就可以在request.js里面去添加就行了。上面只是提供一种可行方法和思路，具体要根据自己的业务需求去调整。