axios 封装

最新推荐文章于 2025-07-21 16:50:38 发布

Yearning Heart

最新推荐文章于 2025-07-21 16:50:38 发布

阅读量414

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/sshgdgd/article/details/134418602

文章介绍了在Vue项目中如何安装axios库，以及如何根据不同环境（开发、测试、生产）设置axios的baseURL，并进行了API的一次和二次封装，包括响应拦截器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载axios

cnpm install --save axios
cnpm install --save vue-axios

引入axios

import axios from "axios";
import { apiGet, apiPost } from "../src/api/index";
Vue.prototype.$apiGet = apiGet;
Vue.prototype.$apiPost = apiPost;
Vue.prototype.$axios = axios;

创建个api文件夹创建一个js文件

第一次封装

import axios from "axios";
axios.defaults.timeout = 30000;
// axios.defaults.baseURL = "http://47.94.4.201";
//获取当前环境配置项中的地址，会自动追加到接口上
console.log(process.env.NODE_ENV);
//获取配置项信息，可以做你的逻辑处理
if (process.env.NODE_ENV === "development") {
  //开发环境下的执行操作
  axios.defaults.baseURL = "http://47.94.4.201/";
  console.log("开发");
} else if (process.env.NODE_ENV === "test") {
  axios.defaults.baseURL = "http://49.94.4.21/";
  //测试环境下的执行操作
  console.log("测试");
} else if (process.env.NODE_ENV === "production") {
  axios.defaults.baseURL = "https://www.zzgoodqc.cn/";
  //生产环境下的执行操作
  console.log("正式");
} else {
  console.log(process.env.NODE_ENV);
  console.log("出现问题");
}
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    //可以写if判断，提前拦截错误信息
    return response;
  },
  function (err) {
    return Promise.reject(err);
  }
);
//代码中无需再加服务器IP地址，会自动追加过去
export function apiGet(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        herader: { token: sessionStorage.getItem("token") },
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}
export function apiPost(url, data) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",
      url: url,
      data,
      headers: { strheader: "123" },
    })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

再创建一个js文件，进行二次封装

import { apiGet } from "./index";
export function getList() {
  return new Promise((resolve) => {
    apiGet("https://www.zzgoodqc.cn/index.php/index/Moves/getMovesList")
      .then((res) => {
        resolve(res);
      })
      .catch((error) => {
        resolve(error);
      });
  });
}

export function loginList(data) {
  return new Promise((resolve) => {
    apiGet("https://www.zzgoodqc.cn/index.php/index/Moves/getDetalById", data)
      .then((res) => {
        resolve(res);
      })
      .catch((error) => {
        resolve(error);
      });
  });
}

在正文主体中使用

import { getList, loginList } from "../api/api";