Vue中request.js封装

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。
https://ckai.xyz

request.js

import axios, { AxiosRequestConfig } from "axios";
import qs from "qs";

// 创建axios实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASEURL,
  timeout: 6000,
  // headers: {
  //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
  // token:
  //   "MTY1Mjk1Mjg4OC42ODM2Nzg0JjJkNzUyOWQwOWU3NTU2OTE0OTU4NzI3ODUxNzkwYTNjZGMwZmRjNjAzNGQ4MGE1YzFkODE1NGVmYzk4MmMyYjM=",
  // },
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 请求头和token判断等
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

//响应拦截器
instance.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (error) => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = "请求错误(400)";
          break;
        case 401:
          error.message = "未授权,请登录(401)";
          break;
        case 403:
          error.message = "拒绝访问(403)";
          break;
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 405:
          error.message = "请求方法未允许(405)";
          break;
        case 408:
          error.message = "请求超时(408)";
          break;
        case 500:
          error.message = "服务器内部错误(500)";
          break;
        case 501:
          error.message = "服务未实现(501)";
          break;
        case 502:
          error.message = "网络错误(502)";
          break;
        case 503:
          error.message = "服务不可用(503)";
          break;
        case 504:
          error.message = "网络超时(504)";
          break;
        case 505:
          error.message = "HTTP版本不受支持(505)";
          break;
        default:
          error.message = `连接错误: ${error.message}`;
      }
    } else {
      if (error.message == "Network Error")
        error.message == "网络异常，请检查后重试！";
        error.message = "连接到服务器失败，请联系管理员";
    }
    return Promise.reject(error);
  }
);

//get请求
export function get(url: string, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

//post请求
export function post(url: string, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, qs.stringify(params))
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

// delete请求
export function deleteFn(url: string, params: AxiosRequestConfig<any> | undefined) {
  return new Promise((resolve, reject) => {
    instance
      .delete(url, params)
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

// put请求
export function put(url: string, params: any) {
  return new Promise((resolve, reject) => {
    instance
      .put(url, qs.stringify(params))
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

export default instance;

调用：

import { get, post, deleteFn, put } from "../utils/request";

export const login_api = (params: {} | undefined) => {
  return get("/XXXX/xxx", params);
};

在.vue中使用之前先import进来就可以了