Fetch()方法介绍
文章目录
- 前言
- XMLRequest(XHR)
- 告别XMLHttpRequest
- Promise
- 使用方法
- 基本的fetch请求
- Response响应
- 使用fetch请求发送cookie
- 总结
前言
在javascript
中,所有的代码都是以单线程的方式执行的,因而网络请求,浏览器事件等操作都需要使用异步的方法。
XMLRequest(XHR)
var xhr=new XMLHttpRequest()xhr.open('get','/some/url',true)xhr.responseType = 'json';xhr.send()xhr.onreadystatechange=function(){if(xhr.status=200&&xhr.readyState==4){console.log(xhr.response)}}
告别XMLHttpRequest
fetch()方法与XMLHttpRequest类似,fetch也可以发起ajax请求,但是与XMLHttpRequest不同的是,fetch方式使用Promise,相比较XMLHttpRequest更加的简洁。
如果你还不了解Promise,需要先补充,关于Promise的一些知识。
Promise
Promise
是进行异步操作的一种解决方案,比传统的处理方法(回调函数/处理事件)更加合理,ES6将其写入了语言标准,统一了语法,原生提供了Promise。 Promise
可以想象成一个装有各种结果的容器,里面装有某个时间返回来的结果,你可以在需要的时候拿取它并进行一些事件处理。
从上边的介绍,大概可以看出Promise相比较于传统的异步操作的一个优势在于不用在异步操作的同时进行事件的处理,更加的合理性。
使用方法
在ES6中规定,Promise对象是一个构造函数,用来生成Promise实例。
const promist = new Promise(function(resolve,reject){if(/*异步操作成功*/){resolve(value);}else{reject(error);}
})
- resolve在异步操作成功时调用,并将异步操作的结果,作为参数传递出去
- reject在异步操作失败时调用,并将异步操作错误结果,作为参数传递出去
Promise
实例生成后可以用then()方法操作成功/失败的回调函数
promise.then(function(value){<!-- 成功的回调处理 -->
},function(error){<!-- 失败的回调处理 -->
})
基本的fetch请求
简单的了解了Promise后我们就可以对fetch()方法有一个很好的认识了,fetch是全局量window的一个方法,第一个参数为URL。
// url (必须), options (可选)
fetch('/some/url', {method: 'get'
}).then(function(response) {}).catch(function(err) {// 出错了;等价于 then 的第二个参数,但这样更好用更直观 :(});
url参数是必须要填写的,option可选,设置fetch调用时的Request对象,如method、headers等
比较常用的Request对象有:
- method - 支持 GET, POST, PUT, DELETE, HEAD
- url - 请求的 URL
- headers - 对应的 Headers 对象
- body - 请求参数(JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式)
如提交JSON示例如下:
fetch('/users.json', {method: 'POST', body: JSON.stringify({email: 'huang@163.com'name: 'jim'})}).then(function() { /* 处理响应 */ });
Response响应
fetch方法的then会接收一个Response实例,值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据,一般第一个then对数据进行处理等。
例如fetch处理JSON响应时 回调函数有一个json()
方法,可以将原始数据转换为json对象
fetch('/some/url', { method: 'get', })// 第一个then 设置请求的格式.then(e => e.json())// 第二个then 处理回调.then((data) => {<!-- data为真正数据 -->}).catch(e => console.log("Oops, error", e))
使用fetch请求发送cookie
fetch(url,{credentials:"include"
})
总结
使用fetch方法请求数据更加的简单,语法简洁,数据处理过程更加的清晰,基于Promise实现。
Fetch()方法介绍相关推荐
- js ES6 fetch 方法
目录 一.fetch 概述 二.fetch 的语法 1.实现一个简单的 fetch 请求 2.fetch 方法介绍 (1).fetch 方法的第一个参数 (2).fetch 方法的第二个参数 (3). ...
- h5的fetch方法_Javascript window.fetch API
关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽然XMLHttpRequest目前为止提供的API还是非 ...
- java rrdtool_rrdtool安装和使用方法介绍,利用rrdtool 进行数据的收集绘图统计,网页显示...
rrdtool安装和使用方法介绍,利用rrdtool 进行数据的收集绘图统计,网页显示. RRDTOOL的绘图~ 所谓的"Round Robin" 其实是一种存储数据的方式,使用固 ...
- webview 加载php页面内容,WebView加载优化的方法介绍
本篇文章给大家带来的内容是关于WebView加载优化的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. WebView加载优化 当WebView的使用频率变得频繁的时候,对于其 ...
- LoadRunner设置检查点的几种方法介绍
LoadRunner设置检查点的几种方法介绍 发布时间: 2011-5-03 11:53 作者: 一米阳光做测试 来源: 51Testing软件测试网采编 字体: 小 中 大 | ...
- python加号换行,Python字符串拼接六种方法介绍
Python字符串拼接的6种方法: 1.加号 第一种,有编程经验的人,估计都知道很多语言里面是用加号连接两个字符串,Python里面也是如此直接用"+"来连接两个字符串: prin ...
- 小程序 sha1和服务器有关系吗,微信小程序使用sha1实现密码加密的方法介绍
微信小程序使用sha1实现密码加密的方法介绍,字符串,程序,转换为,详解,函数 微信小程序使用sha1实现密码加密的方法介绍 易采站长站,站长之家为您整理了微信小程序使用sha1实现密码加密的方法介绍 ...
- 360p4虚拟服务器,360安全路由p4c常见的问题以及解决方法介绍
360安全路由p4c在使用的时候会遇到哪些问题呢?360安全路由p4c在使用的时候操作并不是很复杂,但是对于新手用户来说还是有点难度的,接下来的文章中小编将介绍使用这款路由器遇到的五大问题及其姐姐方法 ...
- 如何用计算机弹逆战6,逆战星光弹夹使用方法介绍 轻松玩转星光弹
逆战星光弹夹使用方法介绍 轻松玩转星光弹,今天小编为大家带来的是逆战星光弹夹使用方法介绍,感兴趣的小伙伴快来看看吧. 目前,逆战共有星光弹匣三款.分别为:陷阱加速.空气墙.强固.三款不同的弹匣,用了三 ...
最新文章
- pytorch 之手写数字生成网络
- apache+tomcat​现在我们实现session共享
- C++ 加载Live2D官方Cubism SDK for Native
- C#泛型-泛型集合DictionaryK,V
- 【转】SQL Server中行列转换 Pivot UnPivot
- 软工随堂练 找出和值最大的子矩阵 尹亚男 赵静娜
- 维护IBM DB2数据库所应领会的基本常识-8
- c语言编写两个矩阵的乘积,如何用c语言编写两个模糊矩阵相乘的程序?
- 「BZOJ1095」[ZJOI2007] Hide 捉迷藏
- HOG特征提取算法的过程
- Python基础——版本的查询
- C++ Code_combobox
- 论文模型构建的步骤_论文实证经验分享|VAR模型实操步骤(下)
- 抢红包案例分析以及代码实现
- python里面的pip是什么意思_python中pip问题
- 第五届模式识别与人工智能国际会议-PRAI 2022
- 为什么Sql Server的查询有时候第一次执行很慢,第二次,第三次执行就变快了
- JavaEE 微信境外支付
- 4g物联网模块dtu网络远程开关控制器485通讯 工业级TTL转4G串口服务器 全网通路由模块 通信通讯模组 二次开发
- BGA集成电路脚位识别
热门文章
- java rfc 二围数据_如何使用Java解析RFC 3339数据时间?
- list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法,背景图像定义项目符号/学习笔记
- 虚拟机知识01:VMware虚拟机网络配置
- return false;和e.preventDefault;的区别
- html 百度语音合成,百度语音合成
- PHP CURL偶尔报错,错误码77
- 简单理解描述文件描述符
- 听自己喜欢的文章-【睿读】
- mongo数据库用户创建及权限授予
- [CF1045C]Hyperspace Highways