《axios返回的对象》
在使用axios进行网络请求时，正确处理其返回的对象是关键。解决方案主要是理解axios返回对象的结构，并通过合理的配置和处理函数来获取需要的数据，同时要对可能出现的异常情况做好应对措施。
一、axios返回对象的基本结构
axios发起请求后，返回的是一个Promise对象。当请求成功时，这个Promise对象会resolve一个包含响应数据等信息的对象；如果失败则reject。
例如：
javascript
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
response对象中包含了多个属性，如data（服务器返回的实际数据）、status（HTTP状态码）、statusText（状态说明）、headers（响应头）、config（请求配置）等。
二、从返回对象中获取数据
-
直接获取data
最简单的方式就是直接从response对象中获取data属性。
javascript
axios.get('url').then(response => {
const data = response.data;
// 对data进行处理
});
-
解构赋值
利用JavaScript的解构赋值可以更简洁地获取想要的数据。
javascript
axios.get('url').then(({data, status}) => {
console.log(data); // 获取到data
console.log(status); // 获取到status
});
三、处理错误情况
-
基本的错误处理
在catch中可以对axios请求中的错误进行处理，像网络错误或者服务器返回非2xx的状态码等情况。
javascript
axios.get('url').catch(error => {
if (error.response) {
// 请求已发出，但服务器响应的状态码不在2xx范围内
console.log(error.response.data);
console.log(error.response.status);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.log(error.request);
} else {
// 设置请求时发生了一些其他错误
console.log('Error', error.message);
}
});
-
全局错误处理
如果希望统一处理所有axios请求的错误，可以通过实现。
javascript
axios.interceptors.response.use(response => {
return response;
}, error => {
// 在这里进行全局的错误处理逻辑
return Promise.reject(error);
});
基本的错误处理
在catch中可以对axios请求中的错误进行处理，像网络错误或者服务器返回非2xx的状态码等情况。
javascript
axios.get('url').catch(error => {
if (error.response) {
// 请求已发出，但服务器响应的状态码不在2xx范围内
console.log(error.response.data);
console.log(error.response.status);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.log(error.request);
} else {
// 设置请求时发生了一些其他错误
console.log('Error', error.message);
}
});
全局错误处理
如果希望统一处理所有axios请求的错误，可以通过实现。
javascript
axios.interceptors.response.use(response => {
return response;
}, error => {
// 在这里进行全局的错误处理逻辑
return Promise.reject(error);
});
在处理axios返回的对象时，要根据实际需求选择合适的方法获取数据并妥善处理可能发生的各种情况。
