axios 返回值格式
解决方案
在使用axios进行网络请求时，了解其返回值格式有助于我们更好地处理请求结果。axios的返回值是一个Promise对象，这个Promise对象成功resolve后会得到一个包含响应数据、响应头等信息的对象。为了方便开发和维护，我们可以对axios的返回值进行统一处理，如只获取需要的数据部分，或者对错误进行集中处理。
默认返回值结构
axios发起请求后，默认返回的是一个包含多个属性的对象：
javascript
{
data: {}, // 服务器返回的数据
status: 200, // HTTP状态码
statusText: 'OK', // 状态文本
headers: {}, // 响应头
config: {}, // 请求配置
request: {} // XMLHttpRequest对象
}
如果直接使用默认返回值，在每个请求成功后的回调函数中都要从response.data里取数据，这样代码看起来不够简洁。
思路一：修改简化返回值
为了让代码更加简洁，可以在axios实例创建时通过设置响应来简化返回值。
```javascript
const instance = axios.create();
// 响应
instance.interceptors.response.use(
response => {
// 只返回data部分
return response.data;
},
error => {
// 错误处理
return Promise.reject(error);
}
);
// 使用简化后的axios
instance.get('/api/data').then(data => {
console.log(data); // 直接是服务器返回的数据
});
```
思路二：自定义返回值包装
有时我们需要更灵活地控制返回值格式，比如加入一些额外的信息，可以创建一个工具函数来包装返回值。
```javascript
function wrapResponse(response) {
return {
success: response.status >= 200 && response.status < 300,
code: response.status,
message: response.statusText,
data: response.data
};
}
// 修改响应
instance.interceptors.response.use(
response => wrapResponse(response),
error => {
if (error.response) {
return wrapResponse(error.response);
} else {
return Promise.reject({
success: false,
code: -1,
message: error.message || 'Network Error',
data: null
});
}
}
);
// 使用包装后的axios
instance.get('/api/data').then(result => {
if (result.success) {
console.log('Success:', result.data);
} else {
console.error('Error:', result.code, result.message);
}
});
```
以上两种方法都可以根据实际需求选择使用，种适合简单的项目，第二种则提供了更多的灵活性。无论采用哪种方式，都建议保持项目的统一性，让所有的API调用都遵循相同的规则。
