通过 axios 请求接口已经很简单了, 但最近在做一个 vue 项目, 想着把 axios 请求再封装一下, 这样 api 就可以只在一处配置成方法, 在使用的时候直接调用这个方法.
但咱们不用每个接口都定义成一个啰嗦的 axios 请求方法, 既然是想简单点, 就尽量只在一处完成简单的配置.
1, 配置 api 接口
将同一模块的接口放在一个文件下, 比如我在 src 的 services 下定义了一个 global.js 作为全局服务的配置, 在它里面配置的 api 可以作为这个服务的方法.
比如:
name 字段将作为之后被调用的方法名, 但这个只是一个单纯的对象, 现在我们定义方法将它转为方法.
2, 将接口配置的数组对象转化为方法
- import axios from "axios";
- const withAxios = apiConfig => {
- const serviceMap = {};
- apiConfig.map(({ name, url, method }) => {
- serviceMap[name] = async function(data = {}) {
- let key = "params";
- if (method === "post" || method === "put") {
- key = "data";
- }
- return axios({
- method,
- url: "/api" + url,
- [key]: data
- });
- };
- });
- return serviceMap;
- };
- export default withAxios;
我们在 utils 下定义了一个通用的方法 withAxios, 这个方法的作用是将 api 配置文件转化为包含方法的一个对象.
3, 在 api 配置文件中使用 withAxios
- import withAxios from "../utils/withAxios";
- const apiConfig = [
- {
- name: "userLogin",
- url: "/login",
- method: "get"
- },
- {
- name: "getUserInfo",
- url: "/login/user",
- method: "get"
- },
- {
- name: "getDeptList",
- url: "/login/department",
- method: "get"
- }
- ];
- export default withAxios(apiConfig);
直接 export 出包装后的对象即可.
4, 在 vuex 中使用
想在 vuex 中调用某个 api, 首先 import 刚才导出的对象
import GlobalService from "@/services/global";
在 action 中调用某个接口:
const { data } = await GlobalService.userLogin(payload);
这样就完事了. 之后只需要配置 - 调用这么两步就可以完成接口调用, 而且接口的语义化也更明确了.
5,axios 的其他配置
我们可以在 utils 的 withAxios 中顺便对 axios 做一些通用的设置.
比如每次请求头中都自动带上鉴权:
- axios.defaults.headers.common["Authorization"] = getCookie("jwt") || "";
- // 注意: 此处只会在 web 应用初始化时配置, 在登录成功后需重新配置 Authorization.
比如使用拦截器对返回对象做统一处理:
- axios.interceptors.response.use(response => {
- const { data } = response;
- if (data.status === -2) {
- Vue.prototype.$Message.error(` 无效的登录信息或登录已失效, 请重新登录 `);
- delCookie("jwt");
- router.push({ path: "/login" });
- }
- if (data.status === -1) {
- Vue.prototype.$Message.error(` 发生错误 [${data.message}]`);
- }
- return response;
- });
来源: https://www.cnblogs.com/zczhangcui/p/9347447.html