首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Axios。在try catch finally中,如何在api返回404错误时获得错误响应

在try catch finally中,可以通过捕获异常并使用错误响应对象来获取API返回的404错误。具体步骤如下:

  1. 在try块中,使用Axios发送API请求并等待响应。
  2. 在catch块中,捕获可能发生的错误。可以使用error对象来获取错误信息。
  3. 判断错误类型,如果是404错误,可以通过error.response来获取错误响应对象。
  4. 错误响应对象包含了错误的详细信息,可以通过error.response.data来获取具体的错误数据。

下面是一个示例代码:

代码语言:javascript
复制
try {
  const response = await Axios.get('API_URL');
  // 处理正常响应
} catch (error) {
  if (error.response && error.response.status === 404) {
    const errorResponse = error.response.data;
    // 处理404错误响应
  } else {
    // 处理其他错误
  }
} finally {
  // 执行清理操作
}

在上述示例中,我们使用Axios发送了一个GET请求,并在try块中等待响应。如果发生错误,catch块会捕获错误并判断是否为404错误。如果是404错误,我们可以通过error.response.data来获取错误数据。最后,无论是否发生错误,finally块都会执行清理操作。

对于Axios的更多信息和使用方法,可以参考腾讯云的产品介绍页面:Axios - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS 如何使用 Ajax 来进行请求

如果存在网络错误,则将拒绝,这会在.catch()块处理。 如果来自服务器的响应带有任何状态码(200、404、500),则promise将被解析。响应对象可以.then()块处理。...错误处理 请注意,对于成功的响应,我们期望状态代码为200(正常状态),但是即使响应带有错误状态代码(例如404(未找到资源)和500(内部服务器错误)),fetch() API 的状态也是 resolved...我们还必须调用response.json()将响应对象转换为JSON 错误处理 我们来看看当HTTP GET请求抛出500错误时会发生什么: fetch('http://httpstat.us/500'...: Unexpected token I in JSON at position 4 我们看到,即使API抛出500错误,它仍然会首先进入then()块,该块它无法解析错误JSON并抛出catch(...将响应代码(例如404、500)视为可以catch()块处理的错误,因此我们无需显式处理这些错误

8.8K20

Vue3如何使用axios进行Ajax请求?

setup函数,我们创建了一个名为users的ref响应式对象,并调用getUsers函数来获取用户列表数据。一旦数据返回,我们将其保存到users对象。...错误处理向服务器发送请求时,我们必须考虑错误处理。axios提供了一个捕获错误的机制,可以使用try-catch语句来处理请求过程中出现的错误。...(error) { console.error(error)}在上述代码,我们使用try-catch语句来捕获错误。...例如,如果服务器返回404错误,你可以执行一些特定的错误处理逻辑:try { const response = await axios.get('https://api.example.com/users...response.use方法接收两个回调函数,第一个用于处理响应返回后的逻辑,第二个用于处理响应发生错误的情况。拦截器可以用于在请求发送前添加请求头、响应返回后处理响应数据等操作。

1.5K30

前端异常的捕获与处理

try { // 可能会导致错误的代码 } catch (error) { // 错误发生时怎么处理 } 如果 try的任何代码发生了错误,就会立即退出代码执行过程,然后执行 catch...finally 子句 try-catch 语句中是可选的,但是 finally 子句一经使用,其代码无论如何都会执行。...只要代码包含 finally 子句,则无论 trycatch 语句中包含什么代码——甚至是 return 语句,都不会阻止 finally 子句执行。...} finally { return "做作业"; } return "睡觉"; } 表面上调用这个函数会返回 "出去玩",因为返回 "出去玩" 的语句位于 try 语句块,而执行此语句又不会出错...为例,模拟接口响应 401 的情况: // 请求 axios.get(/api/test/401") // 结果 Uncaught (in promise) Error: Request failed

3.3K30

axios进阶之路——拦截器篇

本篇为 拦截器篇,主题为axios的请求拦截器、响应拦截器配置。 一、 拦截器介绍 一般使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、 响应拦截器。...return req }, err => { // 在请求错误时要做的事儿 ... // 该返回的数据则是axios.catch(err)接收的数据...// 请求成功对响应数据做处理 ... // 该返回的数据则是axios.then(res)接收的数据 return res }, err => {...// 在请求错误时要做的事儿 ... // 该返回的数据则是axios.catch(err)接收的数据 return Promise.reject...axios.get().then().catch(err => { // 错误处理 }) 但实际开发过程,一般在请求/响应拦截器中统一做错误处理,有特殊接口的话做单独的catch错误处理

1.3K80

Vue笔记:封装 axios 为插件使用

所以本文会详细的跟大家介绍,如何封装请求,并且项目组件复用请求。有需要的朋友可以做一下参考。...封装的基本要求 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重定向等 根据需要...(catch)你想返回错误信息 } ) // response 拦截器 instance.interceptors.response.use( response...} }) } export default install 使用 到此为止,万事俱备就差用了, mian.js 做如下操作: import api from '....总结 以上二次封装较为全面,基本完成了我们之前的需求 错误的处理上还需要与后端协定好返回值,做具体的约定 本文同步发布 https://www.cssge.com 本文转载自 原文作者:前端小子 原文链接

1.9K10

目前5种最流行的发送HTTP请求的方法

在这个实现,我们必须使用响应。ok字段检查响应是否包含HTTP错误,因为catch方法捕获的错误属于网络级别,而不是应用程序级别。...它会自动解析接收到的JSON数据,我们可以通过响应访问这些数据。数据字段。Axios还在其catch方法捕获HTTP错误,从而无需处理响应之前专门检查状态代码。...catch方法内部,我们可以使用一个错误来区分HTTP错误响应检查,它存储HTTP错误代码。 为了使用Axios发送POST请求,我们使用专用的Axios ....它自动地将响应体解析为Javascript对象,而不需要开发人员的干涉。它还在catch方法捕获HTTP错误,我们可以使用错误来识别该方法。响应领域。如果请求由于网络相关的错误而失败,则这些错误。...支持发出请求时发生网络相关或其他瞬态错误时重试请求。 支持不断发展的插件集的帮助下扩展包的功能。

2.9K20

Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装

封装要点 统一 url 配置 统一 api 请求 request (请求) 拦截器,例如:带上token等,设置请求头 response (响应) 拦截器,例如:统一错误处理,页面重定向等 根据需要,结合...Vuex 做全局的 loading 动画,或者错误处理 将 axios 封装成 Vue 插件使用 文件结构 src 目录下,新建一个 http 文件夹,用来存放 http 交互 api 代码。...(catch)你想返回错误信息 } ) // response 拦截器 instance.interceptors.response.use( response...yarn add js-cookie 代码实例 1.引入插件 main.js 以 vue 插件的形式引入 axios,这样在其他地方就可通过 this.$api 调用相关的接口了。 ?...3.调用接口 登录界面 Login.vue ,添加一个登录按钮,点击处理函数通过 axios 调用 login 接口返回数据。 成功返回之后,将 token 放入 Cookie 并跳转到主页。

4.8K40

React 应用获取数据

这篇教程的重点不是它,它可以提供远程 API 用来演示如何在 React 获取数据。...数据更新频率 componentDidMount() 方法初始化数据是很合理的,但是,我需要经常更新数据。基于 REST API,只有通过轮询的方式解决。...在你的应用,你可以执行一些重试逻辑、提示用户或者显示一些预设的内容。 Fetch API vs. Axios Fetch API 是有缺陷的。处理响应的时候必须额外的经过 JSON 处理。...它也不会捕获所有的错误。 例如,404 将会做为一个正常的响应返回。你必须主动检查响应的状态码并处理捕获的网络异常。 因此你必须在两个地方处理错误。...我们也提到了相关的生命周期方法、轮询、进度条和错误的处理。 我们也了解到两个基于 promise 的库:fetch APIaxios.js。现在,你可以构建自己的 React 应用了。

8.4K20

构建Vue项目-身份验证

在这篇文章,我将尝试解释自己的想法,并将过去几年中获得的所有知识与最新,最好的Web开发实践结合起来。...要显示此数据,创建一个Vuex Store, 并使用state存储API响应—通过mapState和mapActions组件中使用它。...某些情况下,最好是发生401错误时简单地注销用户,但是让我们看看如何在不中断用户体验的情况下刷新访问令牌。这是上面提到的代码示例的401拦截器。...我们的ApiService,我们将添加以下代码来安装Axios响应拦截器。 ... import { store } from '.....如果是,则我们正在检查401是否令牌刷新调用本身上发生(我们不想陷入循环中) 永久刷新令牌!)。然后,代码将刷新令牌并重试失败的请求,并将响应返回给调用方。

7K20

Fetch vs Axios

(url) .then(response => console.log(response.data)); Axios响应数据默认为JSON。...错误处理 fetch和axios返回一个被解决(resolved)或被拒绝(rejected)的promise。当promise被拒绝时,我们可以使用.catch() 来处理错误。...与Fetch的方法相比,使用axios处理错误的方式更简洁。 从axios开始,使用.catch()来处理典型错误。...我们碰到一个错误的URL端点的情况下,ok和status属性将分别变成false和404,然后我们抛出一个错误,.catch()子句将显示我们自定义的错误信息。...响应超时/取消请求 让我们看看HTTP客户端针对HTTP请求,如何处理响应超时。对于Axios,我们可以配置对象添加一个timeout属性,并指定请求终止前的时间,单位为毫秒。

1.2K10

面试官:你是怎么处理vue项目中的错误的?

一、错误类型 任何一个框架,对于错误的处理都是一种必备的能力 Vue ,则是定义了一套对应的错误处理规则给到使用者,且源代码级别,对部分必要的过程做了一定的错误处理。...主要的错误来源包括: 后端接口错误 代码本身逻辑错误 二、如何处理 后端接口错误 通过axios的interceptor实现网络请求的response先进行一层拦截 apiClient.interceptors.response.use...这个处理函数被调用时,可获取错误信息和 Vue 实例 不过值得注意的是,不同Vue 版本,该全局 API 作用的范围会有所不同: 从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。...{}catch{} 住全局错误处理函数 try { // 执行设置的全局错误处理函数,handle error 想干啥就干啥 return...判断环境,选择不同的抛方式。

1.1K20

一个小白的角度看JavaScript Promise 完整指南

Resolve:是异步操作完成时应调用的回调。 Reject:是发生错误时要调用的回调函数。 构造函数立即返回一个对象,即 Promise 实例。...它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。...由于我们正在处理 .then(..., onError)部分的错误,因此未调用catch。d不会被调用。如果要忽略错误并继续执行Promise链,可以c上添加一个catch。...当然,这种过早的捕获错误是不太好的,因为容易调试过程忽略一些潜在的问题。 Promise finally finally方法只 Promise 状态是 settled 时才会调用。...如果你希望一段代码即使出现错误始终都需要执行,那么可以.catch之后使用.then。

3.5K31

初学者应该看的JavaScript Promise 完整指南

Resolve:是异步操作完成时应调用的回调。 Reject:是发生错误时要调用的回调函数。 构造函数立即返回一个对象,即 Promise 实例。...它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。...由于我们正在处理 .then(..., onError)部分的错误,因此未调用catch。 d不会被调用。 如果要忽略错误并继续执行Promise链,可以c上添加一个catch。...当然,这种过早的捕获错误是不太好的,因为容易调试过程忽略一些潜在的问题。 Promise finally finally方法只 Promise 状态是 settled 时才会调用。...如果你希望一段代码即使出现错误始终都需要执行,那么可以.catch之后使用.then。

3.2K30

axios封装token示例

/axios'; axios.get('/api/data').then(response => { console.log(response.data); }).catch(error => {...以下是一个较为完整的 Axios 封装例子,它实现了以下功能: 添加了一个请求拦截器,在请求添加 Token 和其他公共参数; 添加了一个响应拦截器,响应中统一处理错误; 对于 HTTP 状态码非...200 的响应,会将错误信息以 Promise.reject 的形式返回,便于调用处处理错误; 对于 401 错误(未授权),会自动跳转到登录页面。...响应拦截器,我们判断了 HTTP 状态码非 200 的响应,并将错误信息以 Promise.reject 的形式返回。对于 401 错误,我们自动跳转到登录页面。.../axios'; axios.get('/api/data').then(response => { console.log(response); }).catch(error => { console.log

58610

Vue 前后端交互基础

在前后端分离的应用模式 ,前端与后端的耦合度相对较低。在前后端分离的应用模式,我们通常将后端开发的每个视图都称为一个接口,或者 API,前端通过访问接口来对数据进行增删改查。...函数的作用是,将 Promise 对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。   ...4: 请求已完成,且响应已就绪 - status:响应状态码 200: "OK" 404: 未找到页面 *...API  ♞ 拦截请求和响应  ♞ 转换请求数据和响应数据  ♞ 取消请求  ♞ 自动转换 JSON 数据  ♞ 客户端支持防御 XSRF 1.4.2 axios 的使用 ☞ 安装 #...; }, function(error){ // 处理错误响应 console.log(error) });

2K50

axios详解以及完整封装方法

三、拦截器 在请求或响应被 then 或 catch 处理前拦截它们,自定义的axios实例也可添加拦截器,: const instance = axios.create(); instance.interceptors.request.use...这样后台根据token判断你的登录情况 // 即使本地存在token,也有可能token是过期的,所以响应拦截器要对返回状态进行判断 const token = store.state.token...get函数返回一个promise对象,当axios其请求成功时resolve服务器返回 值,请求失败时reject错误值。最后通过export抛出get函数。...,如果存在,则统一http请求的header都加上token,不用每次请求都手动添加了 // 即使本地存在token,也有可能token是过期的,所以响应拦截器要对返回状态进行判断 const...判断用户的登录情况,并返回给我们对应的状态码 // 而后我们可以响应拦截器,根据状态码进行一些统一的操作。

1.3K10

Fetch还是Axios——哪个更适合HTTP请求?

响应对象,具有以下值: data,这是实际的响应主体 status,调用的 HTTP 状态,例如 200 或 404 statusText,以文本消息形式返回的 HTTP 状态,例如 ok headers... axios ,它是自动完成的,所以我们只需在请求传递数据或从响应获取数据。它是自动字符串化的,所以不需要其他操作。 让我们看看如何从 fetch() 和 axios 获取数据。...如果出现像 404 这样的错误响应,promise 就会被拒绝并返回一个错误,所以我们需要捕获一个错误,我们可以检查它是什么类型的错误,就是这样。让我们看看代码示例。...当响应良好时,我返回了数据,但是如果请求以任何方式失败,我就能够检查 .catch() 部分错误类型并返回正确的消息。...第一种情况下,我创建了一个 console.log,告知发送请求的情况,响应拦截,我们可以对响应做任何操作,然后返回

4.5K20
领券