JavaScript中如何利用fetch实现异步请求

这篇文章主要讲解了“JavaScript中如何利用fetch实现异步请求”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中如何利用fetch实现异步请求”吧！普通的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的主要优点是语法简洁，更加语义化 基于标准的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.headershas(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姓名：${name}，年龄：${age} ` } 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姓名：${name}，年龄：${age} ` } 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感谢各位的阅读，以上就是“JavaScript中如何利用fetch实现异步请求”的内容了，经过本文的学习后，相信大家对JavaScript中如何利用fetch实现异步请求这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是开发云，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: win7提示“显示器驱动程序已停止响应并且已成功恢复”如何解决

这篇文章主要介绍“win7提示“显示器驱动程序已停止响应并且已成功恢复”如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“win7提示“显示器驱动程序已停止响应并且已成功恢复”如何解决”文章能帮助大家解决问题。一、…