Axios中如何实现类似jQuery Ajax的beforeSend/complete加载效果

Axios 没有直接命名为 beforeSend、complete 的配置项，但不管是单请求单独控制，还是全局统一处理加载逻辑，都能轻松实现。

单请求独立控制 #

和你写的jQuery示例逻辑完全对应，单个请求要加加载效果的话，直接在请求发起前执行加载展示逻辑，再用Promise实例的finally方法处理收尾就行——finally不管请求成功还是失败都会触发，和jQuery的complete回调触发时机完全一致：

// 对应beforeSend：请求发之前展示加载
showLoading()

axios.post(url, data)
  .then(res => {
    // 写接口正常返回的业务逻辑
  })
  .catch(err => {
    // 写接口报错的异常处理逻辑
  })
  .finally(() => {
    // 对应complete：不管成功失败，请求走完就隐藏加载
    hideLoading()
  })

全局统一处理（项目里更常用） #

如果项目里绝大多数接口请求都要触发统一加载效果，没必要每个请求重复写上面的逻辑，用Axios自带的拦截器就能全局搞定：

• 请求拦截器的触发时机完全对应beforeSend，所有请求发出去之前会自动执行，在这里写展示加载的逻辑
• 响应拦截器需要同时覆盖成功、报错两种分支，保证不管请求正常返回还是出异常，加载效果都能正常关闭，对应complete的触发时机

参考代码：

// 可以直接用全局axios，也可以创建自定义实例做隔离
const request = axios.create({
  baseURL: '/api',
  timeout: 15000
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 展示全局加载层
    showGlobalLoading()
    return config
  },
  error => {
    // 请求发出去之前就出错的场景，也要关掉加载避免卡死
    hideGlobalLoading()
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    // 正常返回的业务处理
    const result = response.data
    // 关闭加载层
    hideGlobalLoading()
    return result
  },
  error => {
    // 请求报错的异常处理
    // 一定要在这里也加关闭加载的逻辑，不然接口报错时加载层会一直留在页面上
    hideGlobalLoading()
    return Promise.reject(error)
  }
)

踩坑提醒：如果页面存在同时发起多个请求的场景，别直接在响应回来的时候就关加载，可以加个简单的请求计数器：每次进请求拦截器计数器加1，每次请求完成（不管成功失败）计数器减1，只有计数器归0的时候再执行隐藏加载的逻辑，避免第一个请求返回就把加载层关了，后面还在等待的请求没有加载提示。

内容的提问来源于stack exchange，提问作者Mishen Thakshana