请问封装axios时，你们会把loading功能封进去吗？

Question

当前有个很纠结的问题，我想封装一个axios请求工具，想作为一个独立工具使用，但如果把loading组件（很多第三方UI组件库都有提供）封进去，这样就会破坏这个axios工具的独立性，因为你需要依赖某一个第三方UI组件库提供的loading组件，如果axios请求工具不提供loading功能，感觉有点封的不完整，请问大神们，你们到底如何解决的呢？麻烦指点下小白的我，谢谢

Answer 1

那可以这样：

import { makeRequest } from './axios工具.js';

function showLoading() {
  // 显示loading组件的逻辑
}

function hideLoading() {
  // 隐藏loading组件的逻辑
}

// 在需要使用loading功能的地方
showLoading();

makeRequest({
  method: 'get',
  url: '/api/data',
})
  .then((response) => {
    // 请求成功，处理响应数据
  })
  .catch((error) => {
    // 请求失败，处理错误
  })
  .finally(() => {
    hideLoading();
  });

在需要的地方加loading，一个页面有许多ajax，如果封装axios里面，不需要的也会有，这样也满足op要求

Answer 2

例如有一个请求是获取用户信息,可以封装一个函数叫 getUserInfo,那么就可以把 loading UI 封装到该函数中,当然该函数也会用到你封装的 axios。

Answer 3

你可以实现一个等待任意 Promise 的 loading，工具函数，更加通用，任意组合

function loadingPromise(promise) {
  showLoading();
  return promise.finally(() => {
    hideLoading();
  });
}

loadingPromise(axios.post());

loadingPromise(Promise.resolve());

loadingPromise(Promise.all([axios.post(), axios.get()]));

Answer 4

我一般是在项目中全局为 Axios 设置一个拦截器，在拦截器的内部去处理 loading 的显示与隐藏。

如果你非要封装出一个通用请求工具的话，可以考虑在工具的内部定义一个对象，并向外暴露出三个函数：

const loadingObj = {
  show: function() {},
  hide: function() {},
};

// 在项目入口文件的初始化逻辑那里执行
export function setLoading(show, hide) {
  loadingObj.show = show; // 显示 loading 组件
  loadingObj.hide = hide; // 隐藏 loading 组件
}

// 用到请求的地方执行
export function showLoading() {
  loadingObj.show();
}

// 用到请求的地方执行
export function hideLoading() {
  loadingObj.hide();
}

我觉得没必要封装这个，这么两行代码直接写在 Axios 的全局拦截器里就好了。