vue3 axios封装

在vue3中axios的封装和vue2中是有一些区别的，vue3中可以使用 js 文件和 ts 文件，vue2中只能使用js文件，想要在vue3中封装axios需要先安装axios：

npm install axios

 在安装完成之后，需要在根目录添加三个验证文件进行环境配置： 

     一种是开发环境，就是本地开发时的环境，

     一种是测试环境，就是测试人员使用的服务环境

     一种是生产环境，就是要发布到线上的环境。

注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。

步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件：

.env.development如下：（开发环境）

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://47.94.4.201/'

.env.production如下：（正式线上环境，或者叫生产环境）

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://www.zzgoodqc.cn/'

.env.test（测试环境）

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://49.94.4.21/'
outputDir = test

但是想要使用测试环境就需要在package.json文件中添加 test 命令：

//找到package.json  
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test",
    "publish": "vue-cli-service build && vue-cli-service build --mode test"
  },

在创建完成后需要在 src 文件下创建一个名叫 api 的文件夹，文件夹中创建两个ts文件api.ts;http.ts在app.ts中引入 axios 并添加拦截器，封装调用方法：

import axios from "axios";

axios.defaults.timeout = 1000;

axios.defaults.baseURL = process.env.VUE_APP_API_URL;
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    if (process.env.VUE_APP_MODE === "development") {
      //开发环境下的执行操作
      console.log("开发");
    } else if (process.env.VUE_APP_MODE === "test") {
      //测试环境下的执行操作
      console.log("测试");
    } else {
      //生产环境下的执行操作
      console.log("正式");
    }
    //可以写if判断，提前拦截错误信息
    return response;
  },
  function (err) {
    return Promise.reject(err);
  }
);

export function apiGet(url: any, params?: any) {
  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: any, params: any) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",
      url: url,
      data: params,
      headers: { token: sessionStorage.getItem("token") },
    })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

一次封装完成之后，进行二次封装，在 http.ts 文件中引入 api.ts 文件中所导出的调用方法就可以在下方进行使用：

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

// 获取验证码
export function getcode() {
  return new Promise((resolve, reject) => {
    apiGet("/index.php/index/index/getcode")
      .then((res: any) => {
        resolve(res);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
}

// 登录接口
export function postlogin(str: any) {
  return new Promise((resolve, reject) => {
    apiPost("/index.php/index/index/login", str)
      .then((res: any) => {
        resolve(res);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
}

最后就可以在需要使用axios的组件页面中引入并使用封装好的axios方法了：

import { postlogin,getcode } from "@/api/http";


// 登录
function loginfun() {
  let data = {
    username: username.value,
    pwd: pwd.value,
  };
  postlogin(data).then((res: any) => {
    let token = res.data.token;
    sessionStorage.setItem("token", token);
    if (res.code == 0) {
      open1();
      router.push({ path: "/home" });
    } else {
      open2(res);
    }
  });
}

//获取验证码
function getcodefun(){

  getcode().then((res) => {

     console.log(res);

  }).catch((res) =>{

     console.log(res);

  })

}