JavaScript利用fetch实现异步请求的方法实例
前言
相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求。下面话不多说,来一起看看详细的介绍吧。
先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.3之后才支持,IE完全不支持。当然新技术的发展总会经历这个过程。
Ajax请求
普通的Ajax请求,用XHR发送一个json请求一般是这样的:
var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); }; xhr.onerror = function(){ console.log("error") } xhr.send();
使用fetch实现的方式:
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data) }).catch(function(e){ console.log("error") })
也可以用async/await的方式
try{ let response = await fetch(url); let data = await response.json(); console.log(data); } catch(e){ console.log("error") }
用了await后,写异步代码感觉像同步代码一样爽。await后面可以跟Promise对象,表示等待Promise resolve()
才会继续下去执行,如果Promise被reject()
或抛出异常则会被外面的try...catch捕获。
使用fetch
fetch的主要优点是
- 语法简洁,更加语义化
- 基于标准的Promise实现,支持async/await
- 同构方便
但是也有它的不足
- fetch请求默认是不带cookie的,需要设置
fetch(url, {credentials: 'include'})
- 服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject.
fetch语法:
fetch(url, options).then(function(response) { // handle HTTP response }, function(error) { // handle network error })
具体参数案例:
//兼容包 require('babel-polyfill') require('es6-promise').polyfill() import 'whatwg-fetch' fetch(url, { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" }, credentials: "same-origin" }).then(function(response) { response.status //=> number 100?599 response.statusText //=> String response.headers //=> Headers response.url //=> String response.text().then(function(responseText) { ... }) }, function(error) { error.message //=> String })
参数说明
url
定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一个 Request 对象。
options(可选)
一个配置项对象,包括所有对请求的设置。可选的参数有:
- method: 请求使用的方法,如 GET、POST。
- headers: 请求的头信息,形式为 Headers 对象或 ByteString。
- body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
- credentials: 请求的 credentials,如 omit、same-origin 或者 include。
- cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
response
一个 Promise,resolve 时回传 Response 对象:
属性:
status (number)
- HTTP请求结果参数,在100?599 范围statusText (String)
- 服务器返回的状态报告ok (boolean)
- 如果返回200表示请求成功则为trueheaders (Headers)
- 返回头部信息,下面详细介绍url (String)
- 请求的地址
方法:
text()
- 以string的形式生成请求textjson()
- 生成JSON.parse(responseText)
的结果blob()
- 生成一个BlobarrayBuffer()
- 生成一个ArrayBufferformData()
- 生成格式化的数据,可用于其他的请求
其他方法:
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean)
- 判断是否存在该信息头get(name) (String)
- 获取信息头的数据getAll(name) (Array)
- 获取所有头部数据set(name, value)
- 设置信息头的参数append(name, value)
- 添加header的内容delete(name)
- 删除header的信息forEach(function(value, name){ ... }, [thisContext])
- 循环读取header的信息
使用实例
//获取css里ul的id属性 let uldom = document.getElementById("students"); //单独创建一个json文件,获取地址 let url = "data.json"; function main(){ fetch(url).then(respone=>{ return respone.json(); }).then(students=>{ let html = ``; for(let i=0, l=students.length; i<l; i++){ let name = students[i].name; let age = students[i].age; html += ` <li>姓名:${name},年龄:${age}</li> ` } uldom.innerHTML = html; }); } main();
结合await最终代码
let uldom = document.getElementById("students"); let url = "data.json"; async function main(){ let respone = await fetch(url); let students = await respone.json(); let html =``; for(let i=0, l=students.length; i<l; i++){ let name = students[i].name; let age = students[i].age; html += ` <li>姓名:${name},年龄:${age}</li> ` } uldom.innerHTML = html; } main();
data.json文件内容如下:
[ {"name":"张三","age":"3"}, {"name":"李万","age":"1"}, {"name":"王二","age":"4"}, {"name":"二狗","age":"3"}, {"name":"狗蛋","age":"5"}, {"name":"牛娃","age":"7"} ]
运行后结果是:
姓名:张三,年龄:3 姓名:李万,年龄:1 姓名:王二,年龄:4 姓名:二狗,年龄:3 姓名:狗蛋,年龄:5 姓名:牛娃,年龄:7
源码下载
下载地址:http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- eclipse中关联文件设置方法
- Kubernetes服务网格(第8部分):Linkerd作为入口控制器
- 使用RestSharp 库消费Restful Service
- Python-面向对像及其他
- 基于MongoDB GridFS的图片存储
- css3 过渡和2d变换——回顾
- Microsoft 防跨站点脚本库AntiXSS Library v4.2.1
- Compilify——让你在浏览器中编译.NET代码
- Python进阶-面向对象
- WCF RESTful服务的Google Protocol Buffers超媒体类型
- 使用CoreOs,Docker和Nirmata部署微服务类型的应用
- .NET 4 上的REST 框架
- 结合游戏开发与人工智能研究,游戏大厂 Ubisoft 成立AI研发部门
- Quartz.NET的管理工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树莓派基础实验34:L298N模块驱动直流电机实验
- The consumer group[PushConsumer] has been created before, specify another name please
- 虚拟机系列 | JVM特点,基础结构与执行周期
- 报错 解决-bash: fork: retry: Resource temporarily unavailable
- 结构与算法(04):排序规则与查找算法
- 手把手教你在 TKE 集群中实现简单的蓝绿发布和灰度发布
- 虚拟机系列 | JVM类加载机制
- 树莓派综合项目2:智能小车(一)四轮驱动
- java 字节流入门(内存数组流->文件流)
- 视频高速上云网关/网络穿透EasyNTS智能组网服务平台ini配置文件丢失如何处理?
- 结构与算法(05):二叉树与多叉树
- 树莓派综合项目2:智能小车(二)tkinter图形界面控制
- 虚拟机系列 | JVM运行时数据区
- 虚拟机系列 | 执行引擎和垃圾回收
- 在Linux系统中编译ARM版EasyNTS上云网关服务报undefined错误的解决方案