axios接口拦截封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。如果还对axios不了解的，可以移步axios文档。

安装

npm install axios; // 安装axios

引入

一般我会在项目的src目录中，新建一个api文件夹，然后在里面新建一个httpRequest.js和一个api.js文件。httpRequest.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

// 在httpRequest.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

设置访问环境

const baseUrl = {
  // 测试接口
  dev: "/ceshi", 
  // 线上接口
  pro: "/pro",
};
const host = process.env.NODE_ENV === "development" ? baseUrl.dev : baseUrl.pro;

添加请求前拦截

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    if (config.data != undefined && config.data != null && config.data != '') {
      config.data = Qs.stringify(config.data, {
        arrayFormat: 'indices',
        allowDots: true
      })
      .replace(/\[\d+\]=/g, "=")
      .replace(/%5B\d+%5D=/g, "=");
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

封装请求

export const apiRequest = (url, method, params) => {
  //接收所需要的参数，如果不够还可以自己自定义参数
  let promise = new Promise(function (resolve, reject) {
    let headers = {
      "Content-Type": "application/x-www-form-urlencoded",
        'X-Requested-With': 'XMLHttpRequest'
    };

    axios({
      url: host + url,
      data: params,
      method: method,
      headers: headers,
      // 超时时间
      timeout: 60000,
    })
      .then((res) => {
        if (res.status == 200) {
          res = res.data;
          // 未登录
          if (res.code == -1) {
          // 我此处是跳转的单点登录地址，根据自己项目需求设置需要跳转的路径
              location.href = '*********'
              return;
          }else if (res.code > 0) {
          //  清除请求的样式loading，并弹出报错信息
            window.vm.$Spin.hide()
            window.vm.$Message.error(res.message)
          } else if (res.code == 0) {
          // 返回请求成功的信息
            resolve(res);
          }
        } else {
          window.vm.$Spin.hide()
          window.vm.$Message.error(res.message)
          
          // reject(res);
        }
      })
      .catch((res) => {
        reject(res);
      });
  });
  return promise; //注意，这里返回的是promise对象
};

统一管理api列表

在api.js引入封装体

import { apiRequest } from "./httpRequest";
export const CheckLogin = (params) => {
  return apiRequest("/*******/login", "POST", params).then(
    (res) => res
  );
}

组件中引入并使用

import { CheckLogin} from "@/api/api";
mounted() {
	let params = {
		id:1,
		username:'ceshi'	
	}
	CheckLogin(params ).then(res => {
		console.lgo(res)
	}).catch(err => {
		console.lgo(err)
	})
}

觉得本文对你有帮助？请分享给更多人
点赞和在看就是最大的支持❤️