1、初始化axios请求实例

在util里面新建js文件
image-1653619199842

// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: "", // 基础请求地址
  timeout: 10000, // 请求超时设置
  withCredentials: false, // 跨域请求是否需要携带 cookie
});

2、设置拦截

image-1653619431962

1、设置请求拦截（serviceAxios.interceptors.request.use）

// 创建请求拦截
serviceAxios.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
    }
    // 设置请求头
    if(!config.headers["content-type"]) { // 如果没有设置请求头
      if(config.method === 'post') {
        config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
        config.data = qs.stringify(config.data); // 序列化,比如表单数据
      } else {
        config.headers["content-type"] = "application/json"; // 默认类型
      }
    }
    console.log("请求配置", config);
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

2、设置响应拦截（serviceAxios.interceptors.response.use）

// 创建响应拦截
serviceAxios.interceptors.response.use(
  (response) => {
    let data = response.data;
    // 处理自己的业务逻辑，比如判断 token 是否过期等等
    // 代码块
    return data;
  },
  (error) => {
    let message = "";
    if (error && error.response) {
      switch (error.response.status) {
        case 302:
          message = "接口重定向了！";
          break;
        case 400:
          message = "参数不正确！";
          break;
        case 401:
          message = "您未登录，或者登录已经超时，请先登录！";
          break;
        case 403:
          message = "您没有权限操作！";
          break;
        case 404:
          message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 408:
          message = "请求超时！";
          break;
        case 409:
          message = "系统已存在相同数据！";
          break;
        case 500:
          message = "服务器内部错误！";
          break;
        case 501:
          message = "服务未实现！";
          break;
        case 502:
          message = "网关错误！";
          break;
        case 503:
          message = "服务不可用！";
          break;
        case 504:
          message = "服务暂时无法访问，请稍后再试！";
          break;
        case 505:
          message = "HTTP 版本不受支持！";
          break;
        default:
          message = "异常问题，请联系管理员！";
          break;
      }
    }
    return Promise.reject(message);
  }
);

完整代码：

import axios from 'axios'
import serverConfig from './serverConfig.js'
// 序列化操作
import qs from 'qs'
// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: serverConfig.baseURL,
  timeout: 10000, // 请求超时时间
})

// 异常拦截处理器
const errorHandler = (error) => {
  console.log('异常处理', error)
  let message = ''
  if (error && error.response) {
    switch (error.response.status) {
      case 302:
        message = '接口重定向！'
        break
      case 400:
        message = '参数不正确！'
        break
      case 401:
        message = '您未登录，或者登录已经超时，请先登录！'
        break
      case 403:
        message = '您没有权限操作！'
        break
      case 404:
        message = `请求地址出错: ${error.response.config.url}`
        break
      case 408:
        message = '请求超时！'
        break
      case 409:
        message = '系统已存在相同数据！'
        break
      case 500:
        message = '服务器内部错误！'
        break
      case 501:
        message = '服务未实现！'
        break
      case 502:
        message = '网关错误！'
        break
      case 503:
        message = '服务不可用！'
        break
      case 504:
        message = '服务暂时无法访问，请稍后再试！'
        break
      case 505:
        message = 'HTTP 版本不受支持！'
        break
      default:
        message = '异常问题，请联系管理员！'
        break
    }
  }
  return Promise.reject(message)
}

// 请求拦截器
request.interceptors.request.use((config) => {
  console.log('请求配置', config)
  // 设置请求头
  if (!config.headers['content-type']) {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers['Authorization'] = localStorage.getItem('token') // 请求头携带 token
    }
    // 如果没有设置请求头
    if (config.method === 'post') {
      config.headers['content-type'] = 'application/x-www-form-urlencoded' // post 请求
      config.data = qs.stringify(config.data) // 序列化,比如表单数据
    } else {
      config.headers['content-type'] = 'application/json' // 默认类型
    }
  }
  // 需要返回数据
  return config
}, errorHandler)

// 响应拦截
request.interceptors.response.use((response) => {
  console.log('响应结果', response)
  let data = response.data
  // 处理自己的业务逻辑，比如判断 token 是否过期等等
  // 代码块
  return data
}, errorHandler)

export default request

3、设置接口

image-1653619638220

1、接口

import request from '@/utils/request'

export function getUserInfo (params)  {
  return request({
    url: '/api/website/queryMenuWebsite',
    method: 'get',
    params
  })
}
// post使用data接受
export function login (data)  {
  return request({
    url: '/api/website/login',
    method: 'post',
    data,
    headers: {
      // 传表单格式，不传json格式
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}

3、使用

（1）引入

import { getUserInfo,login } from "@/api/user"

（2）使用

使用.then或者async处理异步

    getUserList () {
      const params = {
        pmenuId: 11
      }
      getUserInfo(params).then(res => {
        console.log(res)
      })
    },
    async loginAsync () {
      let params = {
        email: "123",
        password: "12321"
      }
      let data = await login(params);
      console.log(data);
    }

4、处理请求头

post请求的请求头默认是json格式

注意：post参数需要用data接受
image-1653620568285

（1）方法一

image-1653620607640
在每个post接口设置请求头格式为：‘Content-Type’: ‘application/x-www-form-urlencoded’

（2）方法二

在请求拦截器设置请求头

引入qs

npm install qs

// 序列化操作
import qs from 'qs'

qs.parse()和qs.stringify()
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

var Lk = {year: '2021',month: '01'};
qs.stringify(LK);
console.log(qs.stringify(LK));
//输出year=2021&month=01

使用qs

image-1653620951697

借鉴：

作者：小猪课堂
链接：https://juejin.cn/post/7094165971874611230
来源：稀土掘金