vue axiso封装以及带token的请求
时间: 2023-10-09 09:17:14 浏览: 78
axios封装,携带token
5星 · 资源好评率100%
可以回答的问题,下面是我的回答:
对于vue axiso的封装,我们可以通过封装一个axios实例来实现,具体实现方法可以参考以下代码:
```
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置请求的基础URL
timeout: 5000, // 设置请求的超时时间
withCredentials: true // 允许携带cookie等凭证
})
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
export default instance
```
上面的代码中,我们首先通过`axios.create`方法创建了一个实例,并且在实例创建时设置了默认的请求配置,包括请求的基础URL和超时时间等。然后我们通过`instance.interceptors.request.use`方法来对请求做一些拦截处理,比如在请求头中添加token等信息。
对于带token的请求,我们可以使用上面的封装后的axios实例来发送请求,代码如下:
```
import axios from './axios'
axios.get('/userinfo', {
params: {
id: '123456'
}
}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error)
})
```
在发送请求时,我们可以通过在请求配置中添加`headers`属性来添加请求头,比如:
```
axios.get('/userinfo', {
headers: {
Authorization: `Bearer ${token}`
},
params: {
id: '123456'
}
})
```
这样就可以在请求中带上token信息了。
阅读全文