vue3接口调用axios请求的请求头书写
时间: 2023-11-19 12:04:51 浏览: 32
以下是在Vue3中使用axios进行接口调用时请求头的书写方法:
```javascript
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
config.headers['Authorization'] = 'Bearer ' + getToken() // 如果需要携带token的话
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
// response拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
```
在上述代码中,我们首先通过`import`语句导入了`axios`模块,并使用`axios.create()`方法创建了一个axios实例。然后,我们通过`service.interceptors.request.use()`方法和`service.interceptors.response.use()`方法分别添加了请求拦截器和响应拦截器,以便在请求和响应时进行一些处理。在请求拦截器中,我们设置了请求头的`Content-Type`和`Authorization`字段,以便在发送请求时携带相应的信息。在响应拦截器中,我们对响应数据进行了处理,并返回了响应数据的`data`字段。