JavaScript如何使用fetch来完成异步请求的实例介绍-tutorial js-php.cn

JavaScript如何使用fetch来完成异步请求的实例介绍

黄舟

Lepaskan： 2017-07-26 16:05:41

asal

2249 orang telah melayarinya

传递信息到服务器，从服务器获取信息，是前端发展的重中之重，尤其是现在前后端分离的大前提下，前后端的数据交互是前端的必修科目了，下面这篇文章主要给大家介绍了关于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 = &#39;json&#39;; 
xhr.onload = function(){ 
 console.log(xhr.response); 
}; 
xhr.onerror = function(){ 
 console.log("error") 
} 
xhr.send();

Salin selepas log masuk

使用fetch实现的方式：

fetch(url).then(function(response){ 
 return response.json(); 
}).then(function(data){ 
 console.log(data) 
}).catch(function(e){ 
 console.log("error") 
})

Salin selepas log masuk

也可以用async/await的方式

try{ 
 let response = await fetch(url); 
 let data = await response.json(); 
 console.log(data); 
} catch(e){ 
 console.log("error") 
}

Salin selepas log masuk

用了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 
})

Salin selepas log masuk

具体参数案例：

//兼容包 
require(&#39;babel-polyfill&#39;) 
require(&#39;es6-promise&#39;).polyfill() 
 
import &#39;whatwg-fetch&#39; 
 
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 
})

Salin selepas log masuk

参数说明

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();

Salin selepas log masuk

结合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();

Salin selepas log masuk

data.json文件内容如下：

[ 
 {"name":"张三","age":"3"}, 
 {"name":"李万","age":"1"}, 
 {"name":"王二","age":"4"}, 
 {"name":"二狗","age":"3"}, 
 {"name":"狗蛋","age":"5"}, 
 {"name":"牛娃","age":"7"} 
]

Salin selepas log masuk

运行后结果是：

姓名：张三，年龄：3 
姓名：李万，年龄：1 
姓名：王二，年龄：4 
姓名：二狗，年龄：3 
姓名：狗蛋，年龄：5 
姓名：牛娃，年龄：7

Salin selepas log masuk

Atas ialah kandungan terperinci JavaScript如何使用fetch来完成异步请求的实例介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!