如何使用JS fetch正确处理400 (或任何不成功的状态代码)

使用JS fetch正确处理400 (或任何不成功的状态代码)的方法如下：

使用fetch函数发送请求：
使用fetch函数发送请求：
在fetch的响应处理链中，通过检查response对象的ok属性来判断请求是否成功。如果ok为false，则表示请求不成功，可以抛出一个错误。
在catch块中，可以处理请求失败的情况。可以根据错误类型进行不同的处理，例如显示错误信息给用户或进行其他操作。

这种处理方式可以适用于任何不成功的状态代码，包括400错误。根据具体的业务需求，可以在处理成功的响应数据和处理错误的部分进行相应的逻辑编写。

推荐的腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云开发（小程序开发）：https://cloud.tencent.com/product/tcb
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb
云服务器（CVM）：https://cloud.tencent.com/product/cvm
人工智能（AI）：https://cloud.tencent.com/product/ai

相关·内容

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

Axios 概述和语法 Axios 是一个 Javascript 库，用于从 Node.js 或 XMLHttpRequests 或浏览器发出 HTTP 请求。...在响应对象中，具有以下值： data，这是实际的响应主体 status，调用的 HTTP 状态，例如 200 或 404 statusText，以文本消息形式返回的 HTTP 状态，例如 ok headers...在 axios 中，它是自动完成的，所以我们只需在请求中传递数据或从响应中获取数据。它是自动字符串化的，所以不需要其他操作。让我们看看如何从 fetch() 和 axios 获取数据。...，我已经在承诺对象中检查了代码的状态，如果响应有状态 ok，那么我就可以处理并使用 .json() 方法，但如果没有，我必须在 .then() 里面返回错误。...为了方便和正确的错误处理，对于你的项目来说，axios 绝对会是一个更好的解决方案，但如果你正在构建一个只有一两个请求的小项目，使用 .fetch() 是可以的，但你需要记住正确处理错误。

4.7K2 0

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

一旦处于Service Worker控制之下，它将处于以下状态之一：它将处理从页面发出网络请求或消息时发生的fetch和message事件它将被终止以节省内存以下是生命周期的外观：在ervice...这里您将看到如何拦截请求并返回创建的缓存（并创建新缓存）。安装Service Worker并且用户导航到另一个页面或刷新他所在的页面后，Service Worker将收到fetch事件。...下面是一个演示如何返回缓存资源或执行新请求然后缓存结果的示例： self.addEventListener('fetch', function(event) { event.respondWith(...我们传递了一个来自caches.match（）的promise，它查看请求并发现是否有任何已创建的缓存的缓存结果。如果存在缓存，则返回结果。否则，将执行fetch事件。检查状态是否为200。...更新服务工作者当用户访问您的Web应用程序时，浏览器会尝试重新下载包含Service Worker代码的.js文件。这发生在后台。

1.1K1 0

JavaScript 是如何工作的：Service Worker 的生命周期及使用场景

JavaScript是如何工作的：深入V8引擎&编写优化代码的5个技巧！ JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 !...运行时缓存请求安装了 Service Worker 后，用户导航到另一个页面或刷新所在的页面，Service Worker 将收到 fetch 事件。...下面是一个例子，演示如何返回缓存的资源或执行一个新的请求，然后缓存结果: ?...此方法查看请求，并查找来自 Service Worker 创建的任何缓存的任何缓存结果。如果在缓存中，响应内容就被恢复了。否则，将会执行 fetch。...更新 Service Worker 当用户访问你的 Web 应用程序时，浏览器试图重新下载包含 Service Worker 代码的 .js 文件，这是在后台完成的。

8891 0

JavaScript Fetch API 新手入门指南

开篇自从Fetch API 问世以来，我们就能使用漂亮的语法发送HTTP Request 或取后台接口数据，这篇文章将会分享我自己常用的Fetch方法( GET、POST、搭配await 或promise.all......等) ，随着浏览器的普遍支持，也就不太需要使用XMLHttpRequest 或jQuery AJAX，我们的代码看起来也就更加简洁干净啰～ 01 Fetch 基本用法 fetch()方法，包含了需要...(更多属性和方法请参考fetch Response ) 属性设定值 headers 包含与response 相关的Headers 内容 ok 成功返回true，不成功返回alse status 状态代码...或POST 的要求，都要按照指定的顺序进行，往往会用上一连串的callback 辅助，但是当callback 越来越多，代码也就越来越难管理，然而fetch 返回的是一个Promise，我们也就能直接利用...Fetch API 的神奇，简化了许多原本较为复杂的用法，也让项目代码写起来更加干净易读好维护。更重要的是 JavaScript ES6 原生支持，你不需要安装任何依赖包，直接可以在项目中使用。

1.1K1 0

重学JavaScript Promise API

我们可以向这两个方法传递值，这些值将在消费代码中可用。要了解这在实践中是如何工作的，请参考下面的代码。...无论我们传递给reject的是什么，都将作为参数传递给该回调。 Promise的状态在上面代码中，我们可以通过调用resolve和reject方法来改变Promise的状态。...另一方面，如果相关操作不成功，且 reject 方法被调用，则该Promise处于rejected状态。...最后，如果Promise处于fulfilled或rejected状态，但不是pending状态，则称为settled。...下面是一个使用我们之前代码的示例： function getFirstContributor(org, repo) { showLoadingSpinner(); fetch(`https://

1392 0

pwa-之service worker 基本概念

无论网络连接如何，能够使用Web应用程序意味着用户可以在飞机，地铁或连接受限或不可用的地方不间断地操作。该技术将有助于提高客户端的工作效率，并将提高应用程序的可用性。...==的js文件启动一个本地服务器，推荐使用anywhere，自带了https 成功图示 !...程序如何运行上面的代码描述了service worker的3种状态。当程序处于active状态的时候，我们就可以刷新页面查看处于service worker控制之下的页面了。...Fetch 在当前scope作用域下面的请求会触发fetch事件 Terminate 这个事件可能会发生在任何时候，主要后果就是需要浏览器做service worker的内存回收。...虽然这么说，但我们无法保证service worker任何时候都处于生效状态，所以在service worker中定义的全局状态可能不会被保留。

1K3 1

JavaScript进阶 - AJAX请求与Fetch API

随着技术的发展，Fetch API应运而生，提供了一种更简洁、更现代的方式来处理AJAX请求。本文将深入浅出地介绍AJAX请求与Fetch API的使用，包括常见问题、易错点以及如何避免它们。...基于回调函数：它通常需要使用回调函数来处理响应，这可能导致代码结构复杂，不易维护。不支持Promise：XMLHttpRequest不原生支持Promise，这使得异步代码的管理变得更加困难。...最后，我们使用.catch捕获任何可能发生的错误。常见问题与易错点忽略HTTP状态码：在使用Fetch API时，应始终检查HTTP状态码。例如，200表示请求成功，而404表示未找到资源。...然而，在使用Fetch API时，需要注意检查HTTP状态码、正确处理错误、处理跨域请求问题、发送Cookie以及实现请求超时等常见问题。...通过遵循最佳实践，可以更有效地使用Fetch API，提高Web应用的开发效率和用户体验。

871 0

Vue 前后端交互基础

1.1 了解前后端分离 1.1.1 前后端不分离在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。...只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 ...♞ 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。...Fetch 不是 Ajax 的进一步封装，而是原生 JS ，没有使用 XMLHttpRequest。...1.3.2 Fetch 的使用 ☞ 语法 // fetch 参数为请求的路径，默认为 get 请求 fetch("url").then(function(data) { // 成功返回的 data

2.1K5 0

ajax和fetch、axios的优缺点以及比较

HTTP 响应的状态码是 404 或 500。...默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）....好吧，其实并不完美，async/await是ES7的API，目前还在试验阶段，还需要我们使用babel进行转译成ES5代码。...1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理 2）fetch默认不会带cookie，需要添加配置项 3）fetch不支持abort，不支持超时控制，使用setTimeout...它有以下几大特性：可以在node.js中使用提供了并发请求的接口支持Promise API 简单使用 axios({ method: 'GET', url: url, }) .then

9.2K2 0

Node.js 应用的御用品： Node.js 错误处理系统

开发中，有些开发者会积极寻求处理错误，力求减少开发时间，但也有些人完全忽略了错误的存在。正确处理错误不仅意味着能够轻松发现和纠正错误，而且还意味着能够为大型应用程序开发出稳健的代码库。...特别是对于 Node.js 开发人员，他们有时会也发现自己使用了不那么整洁的代码来处理各种错误，例如会在所有地方都用相同的逻辑来处理错误。那么，难道 Node.js 在处理错误方面不太友好？不。...同样，如果你的代码逻辑发生错误的时候，给应用带来了意想不到的问题，影响到了用户体验，这是否有意义？ 正确处理错误假设你有一些使用异步 Js 的经验，那么在使用回调处理错误时可能会遇到一些挑战。...例如在回调函数中你不断地进行错误检查，可能会导致嵌套过深，从而引发“回调地狱”的问题。这种情况会使代码流变得难以跟踪和理解。那么，你可以使用 promise或async/await 替代回调。...到目前为止，我们主要讨论了如何处理操作错误，那开发者的代码逻辑造成的错误呢? 由于开发者的错误是意料之外的，它们是实际的 bug，可能导致应用程序最终处于错误的状态，并以意想不到的方式运行。

2632 0

探索RESTful API开发，构建可扩展的Web服务

状态无关性：客户端和服务器之间的交互不应该包含关于请求的状态信息。每个请求应该是完全独立的。资源导向： API应该基于资源进行操作，而不是行为。资源可以是任何东西，如用户、产品或订单。...自描述性： API响应应该包含足够的信息，以便客户端能够理解如何使用该响应。为什么选择PHP构建RESTful服务？现在您可能想知道，为什么选择PHP来构建RESTful服务呢？...以下是关于如何使用JSON Web Tokens (JWT) 进行身份验证以及一些安全性的详细实现：使用JSON Web Tokens (JWT) 进行身份验证JSON Web Tokens (JWT)...异常处理当设计异常处理机制时，我们需要确保系统能够正确处理各种可能发生的异常情况，并向客户端提供清晰和友好的错误消息。...以下是如何设计良好的错误处理机制和自定义错误响应的详细实现：设计良好的错误处理机制在设计良好的错误处理机制时，我们应该考虑以下几个方面：捕获异常：在代码中，我们应该使用try-catch块来捕获可能发生的异常

2360 0

前端三大框架之Vue-day04

接口调用方式原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个...这个任务可称为主线程异步模式可以一起执行多个任务 JS中常见的异步调用定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易...当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。...不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。...(url).then() 第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果 */ fetch('http://localhost

3.2K2 0

前端成神之路-vue04

3.7K1 0

asyncawait初学者指南

一个promise开始时处于pending状态。如果与该promise有关的行为成功了，该promise就被称为fulfilled。如果行为不成功，该promise就被称为rejected。...当我们在async函数中使用 await 关键字来"暂停"函数执行时，真正发生的是我们在等待一个promise（无论是显式还是隐式）进入resolved或rejected状态。...最常见的可能是使用try...catch块，我们可以把它包在异步操作中并捕捉任何发生的错误。...为了解决这个问题，我们可以使用Promise.all，它接收一个promise数组，并等待所有promise被解决或其中任何一个承诺被拒绝： (async () => { async function...如果我们在浏览器中工作，我们可以把这段代码添加到一个叫做index.js的文件中，然后像这样把它加载到我们的页面中： </script

2702 0

二十.接口调用

接口调用方式原生ajax 基于jQuery的ajax fetch axios async 和 await 异步 JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript...这个任务可称为主线程异步模式可以一起执行多个任务 JS中常见的异步调用定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易...当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。...不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。...(url).then() 第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果 */ fetch('http://

6.7K1 0

Vue 09.前后端交互

这个任务可称为主线程异步模式可以一起执行多个任务 JS中常见的异步调用定时任何 ajax 事件函数 Promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API使得异步操作更加容易...当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。...fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。...基本使用 /* fetch(url).then() 第一个参数请求的路径，Fetch会返回Promise，所以可以使用then拿到请求成功的结果 */ fetch('http://localhost...async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 await函数不能单独使用 await可以得到异步的结果 async/await 让异步代码看起来、表现起来更像同步代码

6K3 0

前端框架与库 - Vue.js 组件与路由

状态管理：在大型应用中，组件间的状态传递和管理变得复杂，容易出现状态不一致的问题。如何避免使用命名空间或前缀：给组件命名时加入前缀，如 MyAppHeader，避免全局命名冲突。...引入 Vuex：对于复杂的状态管理，使用 Vuex 这样的状态管理模式可以有效组织和管理组件间的共享状态。 2....动态路由参数处理：在动态路由中，未能正确处理参数可能导致页面渲染错误或数据加载失败。懒加载配置：不正确的懒加载配置可能导致首屏加载时间过长，影响用户体验。...如何避免合理使用路由守卫：利用 beforeEnter、beforeRouteEnter 等守卫确保页面在合适的时间加载和显示。 正确处理动态路由参数：使用 this....代码示例下面是一个简单的 Vue.js 组件和路由配置示例： <!

721 0

前端框架与库 - Vue.js 组件与路由

本文将深入浅出地探讨 Vue.js 的组件系统和路由管理，包括常见问题、易错点及避免策略，并附带代码示例。1....状态管理：在大型应用中，组件间的状态传递和管理变得复杂，容易出现状态不一致的问题。如何避免使用命名空间或前缀：给组件命名时加入前缀，如 MyAppHeader，避免全局命名冲突。...引入 Vuex：对于复杂的状态管理，使用 Vuex 这样的状态管理模式可以有效组织和管理组件间的共享状态。2....常见问题与易错点路由守卫使用不当：未正确使用路由守卫（如 beforeEnter）可能导致用户在未准备好时进入页面。动态路由参数处理：在动态路由中，未能正确处理参数可能导致页面渲染错误或数据加载失败。...代码示例下面是一个简单的 Vue.js 组件和路由配置示例：<!

1201 0

使用CloudFlare Worker 免费部署 JSProxy 服务

简单的说就是你不用服务器就可以运行你的代码. 不必担心服务器成本，僵尸流量攻击或部署服务器资源与架构，您可以直接编写代码，开发程序服务。...可以使用的工具：运行任何JavaScript代码，使用最新的标准语言特性；拦截并修改HTTP请求，响应URL、状态、头信息和正文；直接从Worker响应请求，或者转发到其他地方；把HTTP请求发送给第三方服务器...；串行或并行发送多个请求，把这些请求的响应组合成原始请求的最终响应；在响应返回给客户端以后发送异步请求（例如，记录日志或分析）；控制其他Cloudflare特性，比如缓存行为。...代码地址：https://github.com/EtherDream/jsproxy/blob/master/cf-worker/index.js （文章下面有代码备份）预览下： ?...代码备份 'use strict' /** * static files (404.html, sw.js, conf.js) */ const ASSET_URL = 'https://etherdream.github.io

2K3 0

使用CloudFlare Worker 免费部署 JSProxy 服务

本教程仅仅用于学习交流使用 Cloudflare Workers 官方介绍：在边缘运行代码，提供强大的 Web 可扩展性在边缘应用自定义安全规则和过滤逻辑来检测恶意 Bots 病毒并防止它们消耗资源...简单的说就是你不用服务器就可以运行你的代码. 不必担心服务器成本，僵尸流量攻击或部署服务器资源与架构，您可以直接编写代码，开发程序服务。...可以使用的工具：运行任何JavaScript代码，使用最新的标准语言特性；拦截并修改HTTP请求，响应URL、状态、头信息和正文；直接从Worker响应请求，或者转发到其他地方；把HTTP请求发送给第三方服务器...；串行或并行发送多个请求，把这些请求的响应组合成原始请求的最终响应；在响应返回给客户端以后发送异步请求（例如，记录日志或分析）；控制其他Cloudflare特性，比如缓存行为。...代码地址：https://github.com/EtherDream/jsproxy/blob/master/cf-worker/index.js （文章下面有代码备份）预览下： [20200327152952

9.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何使用JS fetch正确处理400 (或任何不成功的状态代码)

相关·内容

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

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

JavaScript 是如何工作的：Service Worker 的生命周期及使用场景

JavaScript Fetch API 新手入门指南

重学JavaScript Promise API

pwa-之service worker 基本概念

JavaScript进阶 - AJAX请求与Fetch API

Vue 前后端交互基础

ajax和fetch、axios的优缺点以及比较

Node.js 应用的御用品： Node.js 错误处理系统

探索RESTful API开发，构建可扩展的Web服务

前端三大框架之Vue-day04

前端成神之路-vue04

asyncawait初学者指南

二十.接口调用

Vue 09.前后端交互

前端框架与库 - Vue.js 组件与路由

前端框架与库 - Vue.js 组件与路由

使用CloudFlare Worker 免费部署 JSProxy 服务

使用CloudFlare Worker 免费部署 JSProxy 服务

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐