如何将jQuery ajax的beforeSend功能转换为axios等效实现

你可以在axios中找到完全对等beforeSend功能的实现，以下是完整的代码转换方案：

完整转换后的代码 #

import axios from 'axios'

// 先处理请求头，适配SPSUtils.getReqHeader逻辑
const customHeaders = {}
// 模拟xhr的setRequestHeader方法，收集需要设置的请求头
const mockXhr = {
  setRequestHeader: (key, value) => customHeaders[key] = value
}
SPSUtils.getReqHeader(mockXhr, self, this, true)

axios.get(`${SPSConstants.SPS_BASE_URL}api/test`, {
  params: {
    // axios会自动对params参数做encodeURIComponent编码，无需手动处理
    filter: JSON.stringify(filter)
  },
  headers: customHeaders,
  responseType: 'json'
}).then(res => {
  const resultObj = res.data
  const totalRecords = resultObj.pageInfo.total
  const currentPage = self.state.currentPage
  const currentRecords = resultObj.tollFreeNumberMasters

  if (totalRecords !== 0 && currentRecords.length === 0) {
    self.setState({ 
      currentPage: 1, 
      pageInfo: { ...pageInfo, offset: 0 } 
    }, () => self.loadTollFreeNumberTblData())
  }
})

beforeSend的两种等效实现方式 #

单次请求生效（和原代码作用范围一致） #

如果仅当前请求需要执行beforeSend逻辑，除了上面直接收集请求头的写法，也可以用临时请求拦截器，用完即删不影响其他请求：

// 添加临时拦截器
const reqInterceptor = axios.interceptors.request.use(config => {
  const xhr = new XMLHttpRequest()
  SPSUtils.getReqHeader(xhr, self, this, true)
  // 把xhr实例挂载到配置上
  config.xhr = () => xhr
  return config
})

// 发起请求
axios.get(/* 你的请求配置 */).then(/* 业务逻辑 */)

// 请求完成后移除拦截器
axios.interceptors.request.eject(reqInterceptor)

全局所有请求生效 #

如果所有请求都需要执行该beforeSend逻辑，直接配置全局请求拦截器即可：

axios.interceptors.request.use(config => {
  const xhr = new XMLHttpRequest()
  SPSUtils.getReqHeader(xhr, self, this, true)
  config.xhr = () => xhr
  return config
})

内容的提问来源于stack exchange，提问作者Piyush Kumar