前端工程师使用fetch常见的四种错误(翻译)

最新推荐文章于 2022-03-30 10:47:21 发布
最新推荐文章于 2022-03-30 10:47:21 发布
阅读量8.3k 收藏 2
点赞数 1
文章标签： 前端 json javascript ViewUI
原文链接：https://juejin.im/post/5cebc4d2f265da1bc37eed52
版权
本文翻译了一篇关于前端开发者在使用fetch API时常见错误的文章，包括误解HTTP错误状态导致的Promise处理、忽略credentials选项、上传JSON时忘记设置`Content-Type`以及手动拼接查询参数的问题。fetch在很多方面与XHR不同，了解这些错误可以帮助开发者更好地使用fetch。
摘要由CSDN通过智能技术生成

查看原文  

fetch 是浏览器中发送http请求最流行方式。它不仅仅是一个比XMLHttpRequest更好、更符合人体工程学的API，它还带来了许多令人兴奋的新功能，比如响应流、对凭证和CORS请求的更多控制，以及与ServiceWorkers和缓存API的集成

我自己也在研究并使用它，同时也见证了fetch的成长(原文：广泛使用), 发现即使有经验的开发者也会犯一些比较常见的错误。我认为这在很大程度上与fetch的API在表面上看起来它的行为模式都很像jQuery $.ajax、angularJS的$http、 axios等。它们之间有一些重要的区别，而这些区别大多源于fetch作为底层网络请求的原型设计

1.认为一旦发生http错误，promise 就会 被 reject

Fetch是基于p

最低0.47元/天 解锁文章
weixin_33757911
关注
Fetch在网络请求中，产生错误了怎么办
m0_61667172的博客
10-10 3190
Fetch在网络请求中，产生错误了怎么办
JavaScript前端面试题——fetch
最新发布
lbcbjtlhmjq的博客
08-02 975
什么是fetch？ AJAX/axios/fetch的区别 fetch核心语法 我们为什么要学fetch？ 提交formdata 提交JSON
fetch各种报跨域错误,数据无法获取的解决方案
小结巴巴的博客
09-05 5694
1、介绍     fetch 提供了一个获取资源的接口 (包括跨域)。     fetch 的核心主要包括：Request , Response , Header , Body     利用了请求的异步特性 --- 它是基于 promise 的   2、用法 var request = new Request('/users.json', { method: '...
fetch请求报错:
没得简介
06-06 784
先上控制台报错代码: <br /> <font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'> <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color:
IDEA 创建 spring cloud 项目时出现 Fetch Error ‘https://start.spring.io‘ 问题
程序员阿飞
03-09 959
问题: IDEA 使用 SpringAssistant 创建spring cloud 项目时出现以下问题 解决办法： 打开 File -> settings 里面写：https://start.aliyun.com 点击ok就可以了
fetch异常状态处理
Robin's Blog
04-30 1949
function CheckRequest(response) { if (!response.ok) { var error = new Error(response.statusText) error.response = response throw error } else { return response...
npm安装hexo报错FetchError，代理127.0.0.1:1080问题
Cherry
05-28 4482
代理127.0.0.1:1080问题 $ npm install -g hexo-cli npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to http://registry.cnpmjs.org/hexo-cli failed, reason: connect ECONNREFUSED 127.0.0.1:1080 npm ERR! at ClientRequest. (C:\P
2024年前端工程师面试题
04-23
### 2024年前端工程师面试题精解 #### 1.1 前端基础 ##### HTTP/HTML/浏览器 **1.1.1 说一下HTTP和HTTPS** HTTP（HyperText Transfer Protocol）是一种用于传输超文本的协议，它是互联网上应用最为广泛的一种...
1_前端工程师技术考核.zip
06-14
【标题】"1_前端工程师技术考核.zip" 暗示了这是一个针对前端工程师技能评估的资料包，可能包含了各种测试题目、项目实战案例或技术文档。从描述中没有得到更多的信息，但我们可以根据标签和文件名来推测其具体内容...
2022年前端工程师最新面试题
08-02
在2022年的前端工程师面试中，面试官会关注候选人在基础技术方面的掌握程度，包括但不限于Vue.js、JavaScript和CSS。以下是一些可能会被问到的关键知识点： 1. **HTTP/HTTPS**： - HTTP是超文本传输协议，用于...
fetch常见问题及解决办法
10-13 230
原文地址:http://www.cnblogs.com/wonyun/p/fetch_polyfill_timeout_jsonp_cookie_progress.html 转载于:https://www.cnblogs.com/kivicki/p/7660840.html
go语言，安装包fetch error 问题解决方案
10年职场两茫茫，35岁凄凉奈若何
08-17 217
go语言，安装包fetch error 问题解决方案
Fetch的数据获取和发送以及异常处理
包磊磊的博客
03-30 4816
无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。 几年前，初始化Ajax一般使用jQuery的ajax方法： $.ajax('some-url', { success: (data) => { /* do something with the data */ }, error: (err) => { /* do something when an error happens */} }); 也可
fetch请求中的跨域和携带Cookies问题
热门推荐
ximikang的博客
03-01 1万+
fetch解读 Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如Service Workers。 [问题]fetch请求中的跨域和携带Cookies问题 在有些请求中会遇到希望通过请求来访问不同源的api，并且希
我用别人fetch 结果.then()not func 原来是我没有return 那个promise ,所以我拿不到值...
weixin_42777161的博客
12-21 83
/** * 拦截器， 配置项 * noloading 请求加载 * nomsg 错误吐司提示 */ import Axios from 'axios' import { removeToken, getToken, usersign, setCookie, getCookie } from './auth' import { Toast } from '...
axios,fetch发起post请求之后请求丢失，不进入then，也不进入catch
_Ennio
04-27 2892
简单来说我有一个form表单，添加用户，截图如下： submit函数发起axios请求： 但是却没有执行then里面的代码，虽然数据添加成功了。查找之后发现原因： axios是一个异步请求，from表单提交之后页面会刷新，会导致请求进程丢失，所以then里面的代码自然也不会执行了。fetch也是同理。 所以只需要让页面不刷新即可，两种解决方法： 1.将form替换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值