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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
mui框架移动开发初体验详解
Oct 11 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
php empty函数 使用说明
2009/08/10 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue实现文字加密功能
2019/09/27 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
基于Python log 的正确打开方式
2018/04/28 Python
python实现邮件发送功能
2019/08/10 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
如何编写python的daemon程序
2021/01/07 Python
Python实现微信表情包炸群功能
2021/01/28 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
销售经理工作职责
2014/02/03 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
八年级历史教学反思
2016/02/19 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
详细介绍python类及类的用法
2021/05/31 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS