Javascript中使用fetch如何进行异步请求？

w8484855@qq.com

本文和大家分享的主要是javascript中使用fetch进行异步请求相关内容，一起来看看吧，希望对大家学习javascript有所帮助。
　　在 AJAX 时代，进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行一些异步请求时，都可以使用 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.name;
　　let age = students.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.name;
　　let age　=　students.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


来源： Helloweba