vue3中axios二次封装

1.在src文件下，创建一个api文件夹

2.在api文件夹下创建两个文件，api.ts和http.ts(名字尽量写成这种)

api文件代码实例

import axios from "axios";

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 可以写 if 判断，提前拦截错误信息
    return response;
  },
  function (err) {
    return Promise.reject(err);
  }
);

export function apiGet(url: string, params?: object) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        headers: { token: sessionStorage.getItem("token") },
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

export function apiPost(url: string, params?: object) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

http代码示例

import { apiPost, apiGet } from "./api";

登录接口
export function getLogin(data: object) {
  return new Promise((resolve, reject) => {
    apiPost("http://47.94.4.201/index.php/index/index/login", data)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}


验证码接口
export function getCode() {
  return new Promise((resolve, reject) => {
    apiGet("http://47.94.4.201/index.php/index/index/getcode")
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

3.下来就可以在vue文件里调用了

import { getLogin, getCode } from "../api/http";

使用import 导入接口