当前位置：首页 > news >正文

axios 请求和响应拦截器

news 2025/8/10 9:35:36

1. 创建实例

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

const $http = axios.create({timeout: 1000,headers: {'Content-Type': 'application/json',}
})

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);});

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.keyconfig.data.marketName = market.val} else {delete config.data.removeMarketCode}}return config
}, error => {// Do something with request errorPromise.reject(error)
})

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

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

if (!config.data.removeMarketCode) {// 指定 data 下某个路径const key = config.data?.targetconst 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
}

使用如下：

class BillManage {export (params) {return axios.post(URL.receivePayBill.export, { ...params, target: 'condition' })}
}
export default new BillManage()// 实际传参
{ "columns": [...], "condition": { "isPay": false, "marketId": "000", "marketName": "白糖" } }

2.2 response 拦截器

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

// response 拦截器
$http.interceptors.response.use(response => {......const res = response.dataif ('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)}
)

导出文件里处理如下：

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))
},

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

export const downloadPDF = function (fileName, blob) {const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob)downloadElement.href = hrefdownloadElement.download = fileNamedocument.body.appendChild(downloadElement)downloadElement.click()document.body.removeChild(downloadElement)window.URL.revokeObjectURL(href)
}