JavaScript利用fetch实现异步请求的方法实例


Posted in Javascript onJuly 26, 2017

前言

相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求。下面话不多说,来一起看看详细的介绍吧。

先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.3之后才支持,IE完全不支持。当然新技术的发展总会经历这个过程。

JavaScript利用fetch实现异步请求的方法实例

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表示请求成功则为true
  • headers (Headers) - 返回头部信息,下面详细介绍
  • url (String) - 请求的地址

方法:

  • text() - 以string的形式生成请求text
  • json() - 生成JSON.parse(responseText)的结果
  • blob() - 生成一个Blob
  • arrayBuffer() - 生成一个ArrayBuffer
  • formData() - 生成格式化的数据,可用于其他的请求

其他方法:

  • 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.3water.com/201707/yuanma/js-fetch(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
vue 组件简介
Jul 31 Javascript
js实现缓动动画
Nov 25 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
你有必要知道的10个JavaScript难点
Jul 25 #Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
波兰购物网站:MALL.PL
2019/05/01 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
中职生自荐信
2013/10/13 职场文书
入团者的自我评价分享
2013/12/02 职场文书
幼儿园老师寄语
2014/04/03 职场文书
个人授权委托书范本
2014/09/14 职场文书
工程安全生产协议书
2014/11/21 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
深度学习详解之初试机器学习
2021/04/14 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript
SQL Server实现分页方法介绍
2022/03/16 SQL Server