axios封装添加请求头
时间: 2023-11-04 15:59:30 浏览: 41
好的,关于axios封装添加请求头,下面是一个简单示例:
```
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'Custom-Header': 'foobar'}
});
instance.get('/user', {
headers: {
'Authorization': 'Bearer ' + getToken()
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
```
在这个示例中,我们使用`axios.create`创建了一个实例,并定义了一些默认配置。然后,在发送请求时,我们可以在options中添加一个headers参数来设置请求头,如上例中的`Authorization`字段。
希望这个示例能对你有所帮助!
相关问题
axios封装请求头
在Vue中使用axios发送请求时,可以通过设置请求头来携带token。具体步骤如下:
1. 在发送请求前,先获取token值。
2. 在axios的请求拦截器中,设置请求头,将token值添加到请求头中。
3. 在后端接收请求时,需要验证token的有效性,以确保请求的安全性。
示例代码如下:
```javascript
// 获取token值
const token = localStorage.getItem('token');
// 设置axios的请求拦截器
axios.interceptors.request.use(config => {
// 将token添加到请求头中
config.headers.Authorization = `Bearer ${token}`;
return config;
});
// 发送请求
axios.get('/api/user').then(res => {
console.log(res.data);
}).catch(err => {
console.log(err);
});
```
在上面的示例中,我们通过localStorage获取了token值,并将其添加到请求头中。在后端接收请求时,需要验证token的有效性,以确保请求的安全性。
axios 封装网络请求
axios是一个基于Promise的HTTP客户端,可以用于浏览器和Node.js端。下面是一个简单的axios封装网络请求的示例:
```javascript
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 接口的基础路径
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前可以做一些处理,比如添加token等
return config;
},
error => {
// 处理请求错误
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做一些处理,比如判断接口是否成功等
return response.data;
},
error => {
// 处理响应错误
console.log(error);
return Promise.reject(error);
}
);
export default service;
```
上面的代码中,我们首先通过`import axios from 'axios'`引入了axios。然后创建了一个axios实例并进行了一些基本配置,比如设置接口的基础路径和请求超时时间。
接下来使用`service.interceptors.request.use`方法添加了一个请求拦截器,可以在发送请求之前对请求进行一些处理,比如添加token等。
然后使用`service.interceptors.response.use`方法添加了一个响应拦截器,可以对响应数据进行一些处理,比如判断接口是否成功。
最后通过`export default service`导出axios实例,方便在项目中使用。
在实际使用中,可以通过`import service from '封装的axios路径'`引入封装好的axios实例,然后使用`service.get`、`service.post`等方法发送网络请求。