自学React之fetch请求

最新推荐文章于 2024-07-08 09:52:46 发布
原创 最新推荐文章于 2024-07-08 09:52:46 发布 · 550 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #html5 #reactjs

本文深入解析了网络请求的三种主流方式：ajax、axios与fetch。详细对比了它们的特点与应用场景，如ajax的回调地狱问题，fetch的promise实现及对cookie的处理等。特别强调了在React中使用fetch的方法与注意事项。

网络请求有

①ajax  ②axios  ③fetch

ajax

1.是XMLHTTPRequest的一个实例

2.只有当状态为200或者304时才会请求成功

3.格式零散，容易出现回调地狱问题

 fetch

1.fetch是基于promise实现的，也可以结合async/await

2.fetch请求默认不带cookie的需要设置fetch( URL,{credentials:'include'})   Credentials有三种参数：same-origin，include, *

3.服务器返回400，500状态码时并不会reject，只有网络出现错误导致请求不能完成时，fetch才会被reject

4.所有版本的IE均不支持原生fetch

5.fetch是widow的一个方法

 

React使用fetch请求

请求方法一般会放在声名周期的componentDidMount里

fetch语法

fetch(参数).then(完成的回调函数).catch(失败的回调函数)

请求的数据基本格式

 

第3章、Fetch网络请求
weixin_44121341的博客
04-11 520
在进行跨域请求时，fetch api 提供了一种简单而强大的解决方案：使用 cors（跨域资源共享）头部实现跨域请求；该协议使用 http 请求和响应进行通信，与传统的 ajax 方式相比，fetch 更加简单易用；三、React Fetch 配置 package 文件解决跨域问题；fetch 是一种网络通信协议，用于在客户端和服务器之间传输数据；fetch api 默认只支持 get 和 post 请求方法；四、React Fetch 手动配置跨域；五、React Fetch 封装网络请求；
React native fetch 遇到的坑
meyin的博客
06-27 5594
最近在自学react native，学习过程中遇到了不少的坑，下面将针对登录这一功能来详细介绍一下以下遇到的两个问题。
react学习——22使用fetch发送网络请求
最新发布
ChenJin_2的博客
07-08 528
react学习——22使用fetch发送网络请求
fetch跨域问题
兔子零
08-06 3276
fetch默认不携带cookie fetch发送请求默认是不发送cookie的，不管是同域还是跨域；那么问题就来了，对于那些需要权限验证的请求就可能无法正常获取数据，这时可以配置其credentials项，其有3个值： omit: 默认值，忽略cookie的发送 same-origin: 表示cookie只能同域发送，不能跨域发送 include: cookie既可以同域发送，也可以跨域发送 credentials所表达的含义，其实与XHR2中的withCredentials属性类似，表示请求是否携带c
React fetch请求方式
风吹pp凉
12-14 5540
fetch请求 fetch是一个使用了Promise，封装程度更高的网络请求API Promise 是异步编程的一种解决方案 Promise 对象代表一个异步操作,有三种状态:Pending(进行中) Resolved(已完成) Rejected(已失效) Promise 实例生成以后,可以分别制定'完成' 和'失败'状态的回调函数,实现方式:链式调用方法 语法: fetch(参数).th...
React Fetch请求
Jane_Serry@优快云博客
06-19 566
React Fetch请求 最近需要用，所以学习一下 1.fetch 基于promise的ajax请求https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API 2.React使用fetch 请求的方法一般放在生命周期的componentDidMount里 请求的数据基本格式 图片.png import Rea...
详解React native fetch遇到的坑
12-10
最近在自学react native，学习过程中遇到了不少的坑，下面将针对登录这一功能来详细介绍一下以下遇到的两个问题。 1.在请求数据的时候，一般情况下我们会直接提交Content-type是json数据格式的请求。类似 fetch('...
小红书首页React自学项目源码解析
- 在React组件中可能会用到数据获取，如使用axios或fetch API进行HTTP请求，从远程服务器获取数据。 8. **样式处理**： - React支持多种方式来处理样式，包括传统的CSS文件、样式表、内联样式以及CSS-in-JS解决...
【React】《React 学习手册 (第2版) 》笔记-Chapter12-React 服务器端渲染
江湖人称菠萝包
06-20 1036
这个组件可以直接在浏览器渲染，也可以捕获输出的 HTML 字符串，在其他环境中渲染。我们可以构建同构应用，在不同的平台中渲染组件，还可以通过一定的架构方式，跨多个平台全局重用 JavaScript 代码。我们伺服 Create React App 生成的 build 文件夹，在浏览器中运行 HTML，通过 script.js 文件加载所需的 JavaScript 代码。有了 Node.js，我们可以在其他应用，例如服务器端应用、CLI 应用，甚至是原生应用中重用为浏览器编写的代码。
React实战之React+Redux实现一个天气预报小项目
爱前端也爱恋爱
07-04 1435
引言 经过一段时间的React学习，React和Vue的开发确实有很大的不同，但是都是MVVM框架，因此上手没有很大的难度，这次用React+Redux开发一个天气预报小项目。源码地址：github.com/Beichenlove… <<<前端是我一辈子的信仰，写代码直到50岁>>> 关注微信公众号：web前端学习圈 回复关键词【优快云】领取2020年最新web前端系统学习教程（视频+笔记+素材+源码+项目实战）全套整理约50G 另外公众号每天都会分享学习方法，知
react fetch请求
susuzhe
01-09 9129
首先封装get：（get.js） import 'whatwg-fetch' import 'es6-promise' export function get(url) { // var result = fetch('http://www.mockhttp.cn'+url, { //打包apk时候使用 var result = fetch(''+url, { credentails:
react的数据请求(fetch)
WX_chen的博客
05-15 758
一、下载 npm install whatwg-fetch --save 二、在src目录下创建文件service封装下fetch src/service/fetch.js import 'whatwg-fetch' export default{ post(url,data){ return fetch(url, { ...
react 处理fetch网络请求
weixin_43294560的博客
02-12 988
1、通过node.js搭建服务器,且必须有跨域请求 2、php搭建的不行,估计是跨域的问题 3、在页面渲染后的componentDidMount()生命周期函数中发送请求 代码示例: react.js文件 import React ,{Component}from 'react'; import User from './user' class App extends React.Compon...
React学习13（fetch发送请求）
xiaojian044的博客
12-15 336
fetch发送请求
react（36）——使用fetch向服务器发送请求。
木子 旭的博客
03-12 1104
1.fetch是什么 我们之前向服务器发送请求的方式无非就是ajax，jquery，axios。这三种方式都是通过包装XMLHttpRequest类来实现请求的。 fetch是系统自带的一个类，也能够用于向服务器发送请求，且不涉及XMLHttpRequest类。 fetch是基于promise实现的，学习需要promise功底。 2.fetch使用 fetch("http://localhost:3000/api1/posts") .then( (response) => {
react-封装 fetch 请求方法
倚树探星的博客
06-05 1857
1、封装请求 创建 http.js /** * 封装请求 */ import qs from 'querystring' /** * get */ export function httpGet(url) { const result = fetch(url) return result } /** * post */ export function httpPost(url, params) { const result = fetch(url, { method: 'P
react 中使用Ajax请求（axios，Fetch）
huangjianfeng21的博客
06-29 8401
React本身只关注于界面,并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery:比较重,如果需要另外引入不建议使用 axios:轻量级,建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端 ...
react-fetch详谈
热门推荐
天行健，自强不息 ; 地势坤，厚德载物
05-28 1万+
React-Fetch引言：        fetch在React-js中相当于XMLHttpRequest，它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可拓展性和高效性。XMLHttpRequest在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心成功后的业务处理，但是也要配置繁琐的内容，导致配置和调用比较混乱，也不符合关注分离的原则，fetch...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

没用的·阿吉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值