axios访问网站出现了错误, 如何解析错误呢? ChatGPT告诉你

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 使用可选链操作符(?.)可以让代码更加简洁。如果你的运行环境已经支持ES2020语法,那么可以直接使用可选链操作符来获取嵌套属性,就像这样:

牙叔教程 简单易懂

我是用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给的这个答案了

公众号 牙叔教程

这个ChatGPT星球有多牛逼


相关文章
|
6天前
|
弹性计算 运维 网络安全
阿里云轻量应用服务器产品解析与搭建个人博客网站教程参考
轻量应用服务器(Simple Application Server)作为阿里云面向单机应用场景推出的云服务器产品,以其一键部署、一站式管理、高性价比等特性,深受个人开发者、中小企业及入门级用户的喜爱。本文将全面解析阿里云轻量应用服务器的产品优势、应用场景、使用须知,以及使用轻量应用服务器搭建个人博客网站的详细教程,帮助用户更好地了解和使用这一产品。
|
3月前
|
监控 前端开发 安全
如何开发一个网站:全面解析与实战指南
在数字化时代,网站是企业和个人展示形象、传播信息的关键平台。本文提供从规划、设计、开发、上线到后期维护的全方位网站开发指南,涵盖明确目标、分析用户、设定功能需求、设计风格、技术选型、测试部署及优化升级等内容,帮助你打造既美观又实用的网站。
234 4
|
4月前
|
监控 网络协议 应用服务中间件
深入解析:如何确定网站使用的端口号
【10月更文挑战第21天】 在网络通信中,端口号是识别特定服务的关键。一个IP地址可以有多个端口,每个端口可能运行着不同的服务。当我们在浏览器地址栏输入一个网址时,实际上是通过特定的端口与服务器进行通信。本文将探讨如何确定一个网站使用的端口号,以及端口号在网络通信中的作用。
321 4
|
4月前
|
数据采集 XML 前端开发
Jsoup在Java中:解析京东网站数据
Jsoup在Java中:解析京东网站数据
|
4月前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
283 0
|
4月前
|
域名解析 缓存 网络协议
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决?
|
4月前
|
网络安全 Docker 容器
【Bug修复】秒杀服务器异常,轻松恢复网站访问--从防火墙到Docker服务的全面解析
【Bug修复】秒杀服务器异常,轻松恢复网站访问--从防火墙到Docker服务的全面解析
222 0
|
3月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
130 2
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
2月前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析

推荐镜像

更多