使用 Axios 发起 API 请求并设置拦截器
// eslint-disable-next-line no-unused-vars
const url = '/api/holiday/year/2022'
const service = axios.create({
baseURL: 'https://timor.tech',
timeout: 5000
})
这段代码使用 Axios 库发起一个 GET 请求,获取 2022 年节假日信息的 API 数据。代码中定义了一个名为 request 的 Axios 实例,并设置了两个拦截器,一个用于请求,另一个用于响应。
service.interceptors.request.use(config => {
console.log('config', config)
config.headers['requestTime'] = new Date().getTime()
// throw new Error('aaa') 异常传递
return config
}, err => {
Promise.reject(err)
})
请求拦截器中,通过 config.headers 设置了一个名为 requestTime 的请求头,其值为当前时间的毫秒数。此外,还可以看到一个异常抛出语句 throw new Error('aaa'),但是该语句被注释掉了。
service.interceptors.response.use(response => {
if (response.data && response.data.code === 0) {
return response.data
} else {
Promise.reject(response.data.message)
}
}, error => {
Promise.reject(error)
})
响应拦截器中,对响应进行了判断,如果响应数据的 code 属性为 0,则返回响应数据;否则,通过 Promise.reject() 抛出一个包含响应数据中的 message 属性的错误对象。
service({
method: 'get',
url: url,
params: { name: 'username', pass: 'pass' },
headers: { token: 'ADFS' }
})
.then(response => {
console.log('data', response)
})
.catch(error => {
// 捕获传递异常
console.log(error)
})
在最后一行代码中,使用 request 发起了一个 GET 请求,其中包含了请求的 URL、参数、请求头等信息。之后,通过 then() 方法处理成功的响应数据,通过 catch() 方法处理发生的错误。如果请求或响应拦截器中抛出了异常,它们将被捕获并传递到 catch() 方法中。