axios 请求和响应拦截器

1. 创建实例

使用 axios.create() 使用自定义配置创建一个 axios 实例。

const $http = axios.create({
	timeout: 1000,
	headers: {
		'Content-Type': 'application/json',
	}
})
1
2
3
4
5
6

2. 拦截器

在请求或响应被 then 或者 catch 处理前拦截他们，拦截分为请求拦截和响应拦截。

// 添加请求拦截器
$http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
$http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.1 request 拦截器，全局添加市场信息

$http.interceptors.request.use(config => {
  ......
  // 市场编码
  if (config.data && Object.prototype.toString.call(config.data) === '[object Object]' && typeof config.data !== 'string') {
    if (!config.data.removeMarketCode) {
      const market = store.state.common.market || {}
      config.data.marketId = market.key
      config.data.marketName = market.val
    } else {
      delete config.data.removeMarketCode
    }
  }

  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• removeMarketCode 是否移除市场信息，默认不移除；

根据上述代码可以看到，市场信息都是默认添加在 config.data 对象中下的，如果我们需要调整传参对象的位置时，那需要更改上述逻辑，具体代码如下：

if (!config.data.removeMarketCode) {
	// 指定 data 下某个路径
    const key = config.data?.target
    const market = store.state.common.market || {}
    const marketObj = { marketId: market.key, marketName: market.val }
    if (key) {
        config.data[key] = { ...config.data[key], ...marketObj }
        delete config.data.target
    } else {
        config.data = { ...config.data, ...marketObj }
    }
} else {
    delete config.data.removeMarketCode
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用如下：

class BillManage {
 export (params) {
    return axios.post(URL.receivePayBill.export, { ...params, target: 'condition' })
  }
}
export default new BillManage()

// 实际传参
{ "columns": [...], "condition": { "isPay": false, "marketId": "000", "marketName": "白糖" } }
1
2
3
4
5
6
7
8
9

2.2 response 拦截器

通过响应拦截器我们用来处理响应异常的接口进行拦截提示，返回对象中会返回一个 succeed 字段来表示接口处理正常还是异常情况，当然也有可能直接返回文件流，因此这里使用的 ‘succeed’ in res 的写法来表示 res 中是否存在 succeed 的 key 来代替 res.succeed。

// response 拦截器
$http.interceptors.response.use(
  response => {
    ......
    const res = response.data
    if ('succeed' in res && res.succeed !== true) {
      notification.error({
        message: 'Error',
        description: res.errorMsg,
      })
    
      return Promise.reject(new Error(res.errorMsg || 'error'))
    } else {
      return response.data
    }
  },
  error => {
    return Promise.reject(error)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

导出文件里处理如下：

class ReceivePayAccountManage {
  // 下载模板
  payOrderImportTmpl (params) {
    return axios.post(URL.receivePayOrder.payOrderImportTmpl, params, { responseType: 'blob' })
  }
}
export default new ReceivePayAccountManage()

handleDownload (methodName) {
  handleRepeatSubmit.call(this, null, 
  	() => config.methods[methodName].handler(), 
  	(data) => downloadPDF('应付单导入模板.xlsx', data)
  )
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

downloadPDF 方法传入文件名和文件流，下载文件信息处理，具体代码如下：

export const downloadPDF = function (fileName, blob) {
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob)
  downloadElement.href = href
  downloadElement.download = fileName
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href)
}
1
2
3
4
5
6
7
8
9
10