牙叔教程 简单易懂
问
我是用axios访问网站, 如果出现了错误, 怎么提取错误信息?
ChatGPT答
在axios的响应拦截器中，可以通过判断HTTP状态码或者自定义的错误码来提取错误信息。示例代码如下：
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: 'https://example.com',
});
// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 请求成功时的操作
return response;
},
error => {
// 请求失败时的操作
if (error.response) {
// HTTP错误状态码
console.log(error.response.status);
// 错误信息
console.log(error.response.data.message);
} else if (error.request) {
// 没有收到响应
console.log(error.request);
} else {
// 其他错误
console.log('Error', error.message);
}
return Promise.reject(error);
}
);
// 发送请求
instance.get('/api/data').catch(error => {
// 处理请求失败的情况
});
以上是一种基本处理方式，具体根据项目和接口的不同自行调整。
他还用了拦截器, 我不想用拦截器, 再问
问
我不想使用拦截器
ChatGPT答
如果您不想使用拦截器，可以在请求失败的回调函数中直接获取错误信息。示例代码如下：
import axios from 'axios';
// 发送请求
axios.get('https://example.com/api/data')
.then(response => {
// 处理请求成功的情况
})
.catch(error => {
if (error.response) {
// HTTP错误状态码
console.log(error.response.status);
// 错误信息
console.log(error.response.data.message);
} else if (error.request) {
// 没有收到响应
console.log(error.request);
} else {
// 其他错误
console.log('Error', error.message);
}
// 处理请求失败的情况
});
这样就可以直接在请求失败的回调函数中获取到错误信息了。注意，在请求失败时，error对象包含很多信息，需要通过判断来确定错误类型并提取相应的信息。
看着还挺正常的, 我问问他为啥和我的不一样
问
为什么别人访问ChatGPT的api发生错误是这样解析的?
e.response.data.error.message
.catch((e) => {
console.log("axios发生错误");
let errorMsg = e?.response?.data?.error?.message ? e.response.data.error.message : e.message;
console.log(errorMsg);
});
而你是这样解析的: error.response.data.message
ChatGPT答
在使用axios访问API时，错误的返回格式是由后端接口定义的。因此，不同的API可能会有不同的错误信息格式。
一般来说，当请求失败时，error.response表示服务器响应错误，它包含以下几个属性：
status：HTTP状态码。data：响应数据。headers：响应头部。config：请求配置对象。
如果服务器返回的错误信息中包含了一个名为error的字段，并且该字段还包含了一个名为message的子字段，那么可以通过以下代码获取到该错误消息：
let errorMsg = e?.response?.data?.error?.message ? e.response.data.error.message : e.message;
如果服务器返回的错误信息没有这样的结构，那么就需要根据实际情况进行处理。
问
还有没有更好的提取错误消息的方法?
ChatGPT答
除了使用三元表达式来提取错误消息之外，还有一个更简洁的方法是使用lodash库中的get()函数。该函数可以在对象中安全地获取嵌套属性并避免抛出异常。示例如下：
import axios from 'axios';
import { get } from 'lodash';
// 发送请求
axios.get('https://example.com/api/data')
.then(response => {
// 处理请求成功的情况
})
.catch(error => {
const errorMsg = get(error, 'response.data.error.message', error.message);
console.log(errorMsg);
// 处理请求失败的情况
});
上述代码中，通过调用get()函数从error对象中安全地获取response.data.error.message属性值，并在无法获取时返回error.message作为默认值。
这种方式比使用三元表达式更加简洁可读，同时也更灵活。如果后端接口返回的错误信息格式发生了变化，只需要修改一行代码即可适应新的格式。
不是我想要的答案, 我要吐槽它
问
感觉不如 ?. 简洁呢
ChatGPT答
确实，使用可选链操作符（?.）可以让代码更加简洁。如果你的运行环境已经支持ES2020语法，那么可以直接使用可选链操作符来获取嵌套属性，就像这样：
import axios from 'axios';
// 发送请求
axios.get('https://example.com/api/data')
.then(response => {
// 处理请求成功的情况
})
.catch(error => {
const errorMsg = error?.response?.data?.error?.message ?? error.message;
console.log(errorMsg);
// 处理请求失败的情况
});
上述代码中，使用了可选链操作符来获取error.response.data.error.message属性值，并在无法获取时返回error.message作为默认值。
需要注意的是，虽然可选链操作符非常方便，但它不适用于所有情况。在一些特殊的场景下，比如需要对获取到的属性值进行修改或传递给其他函数等操作时，可能需要使用其他方式来处理。
这个答案, 比三元表达式简洁啊, 我决定就用ChatGPT给的这个答案了
