axios封装过后调用如何取响应头数据
时间: 2024-05-19 17:05:50 浏览: 8
在封装的axios请求中,可以通过`response.headers`获取响应头数据。例如:
```javascript
import axios from 'axios';
const request = axios.create({
baseURL: 'http://example.com/api',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});
// 封装的GET请求
export function get(url, params) {
return request({
url,
method: 'GET',
params
}).then(response => {
// 获取响应头数据
const headers = response.headers;
// 处理响应数据
const data = response.data;
return Promise.resolve(data);
}).catch(error => {
return Promise.reject(error);
});
}
```
在上面的代码中,`response.headers`可以获取到响应头数据,可以根据需要进行处理。
相关问题
使用axios封装Ajax调用数据接口
好的,以下是一个基于axios封装的Ajax调用数据接口的示例:
```javascript
import axios from 'axios';
const request = axios.create({
baseURL: 'https://api.example.com', // 接口的基础路径
timeout: 5000, // 请求超时时间
});
// 请求拦截器
request.interceptors.request.use(config => {
// 在发送请求之前做些什么,比如添加token
config.headers.Authorization = 'Bearer ' + getToken();
return config;
}, error => {
// 对请求错误做些什么
console.error('请求拦截器错误:', error);
return Promise.reject(error);
});
// 响应拦截器
request.interceptors.response.use(response => {
// 对响应数据做些什么,比如处理错误状态码
if (response.status !== 200) {
console.error('响应状态码错误:', response.status);
return Promise.reject(new Error('响应状态码错误'));
}
return response.data;
}, error => {
// 对响应错误做些什么
console.error('响应拦截器错误:', error);
return Promise.reject(error);
});
export default request;
// 调用接口
import request from '@/utils/request';
request({
method: 'get',
url: '/api/user',
params: {
id: 1
}
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
```
以上代码中,我们通过axios.create()方法创建了一个axios实例,然后定义了请求拦截器和响应拦截器,在发送请求之前可以在请求头中添加token,对响应数据也可以进行一些处理。最后我们导出了这个axios实例,并在调用接口时使用。
vue怎么获取封装的axios里面的响应头数据
可以使用axios的拦截器,在响应拦截器中获取响应头数据并保存到全局变量或者Vuex中,在需要使用响应头数据的组件中调用即可。
示例:
1. 封装axios并添加响应拦截器
```
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:3000',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 在这里获取响应头数据并保存到全局变量或者Vuex中
const token = response.headers.authorization
window.token = token
return response.data
},
error => {
return Promise.reject(error)
}
)
export default instance
```
2. 在组件中使用响应头数据
```
<template>
<div>
<p>响应头数据:{{ token }}</p>
<button @click="getData">获取数据</button>
</div>
</template>
<script>
import axios from '@/utils/axios'
export default {
data() {
return {
token: ''
}
},
methods: {
getData() {
axios.get('/data').then(res => {
console.log(res)
})
}
},
mounted() {
this.token = window.token
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)