当前位置：首页 > 资讯 > 技术文档

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

时间：2022-10-31 13:36 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] 相信大家应该都有所了解，在这个AJAX时代，如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行一些异步请求时，都可以使用 fetch 进行完美的网络请求。下面话不多说，来一起看看详细的介绍吧。先来看看各个浏览器对fetch的原生支持情况，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。当然新技术的发展总会经历这个过程。 [img]http://files.jb51.net/file_images/article/201707/201772690154094.png?20176269253[/img] [b]Ajax请求[/b] 普通的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对象，表示等待[code]Promise resolve()[/code]才会继续下去执行，如果Promise被[code]reject()[/code]或抛出异常则会被外面的try...catch捕获。 [b]使用fetch[/b] fetch的主要优点是 [list] [*]语法简洁，更加语义化[/*] [*]基于标准的Promise实现，支持async/await[/*] [*]同构方便[/*] [/list] 但是也有它的不足 [list] [*]fetch请求默认是不带cookie的，需要设置[code]fetch(url, {credentials: 'include'})[/code][/*] [*]服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject.[/*] [/list] 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 
})

[b]参数说明[/b] [b]url[/b] 定义要获取的资源。这可能是：一个 USVString 字符串，包含要获取资源的 URL。一个 Request 对象。 [b]options（可选）[/b] 一个配置项对象，包括所有对请求的设置。可选的参数有： [list] [*]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。[/*] [/list] [b]response[/b] 一个 Promise，resolve 时回传 Response 对象：属性： [list] [*][code]status (number)[/code] - HTTP请求结果参数，在100–599 范围[/*] [*][code]statusText (String)[/code] - 服务器返回的状态报告[/*] [*][code]ok (boolean) [/code]- 如果返回200表示请求成功则为true[/*] [*][code]headers (Headers) [/code]- 返回头部信息，下面详细介绍[/*] [*][code]url (String) [/code]- 请求的地址[/*] [/list] 方法： [list] [*][code]text()[/code] - 以string的形式生成请求text[/*] [*][code]json() [/code]- 生成[code]JSON.parse(responseText)[/code]的结果[/*] [*][code]blob()[/code] - 生成一个Blob[/*] [*][code]arrayBuffer() [/code]- 生成一个ArrayBuffer[/*] [*][code]formData() [/code]- 生成格式化的数据，可用于其他的请求[/*] [/list] 其他方法： [list] [*][code]clone()[/code][/*] [*][code]Response.error() [/code][/*] [*][code]Response.redirect()[/code][/*] [*][code]response.headers[/code][/*] [*][code]has(name) (boolean) [/code]- 判断是否存在该信息头[/*] [*][code]get(name) (String) [/code]- 获取信息头的数据[/*] [*][code]getAll(name) (Array)[/code] - 获取所有头部数据[/*] [*][code]set(name, value) [/code]- 设置信息头的参数[/*] [*][code]append(name, value) [/code]- 添加header的内容[/*] [*][code]delete(name) [/code]- 删除header的信息[/*] [*][code]forEach(function(value, name){ ... }, [thisContext]) [/code]- 循环读取header的信息[/*] [/list] [b]使用实例[/b]

//获取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

[b]源码下载[/b] 下载地址：[url=http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar]http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar[/url] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：仿微博字符限制效果实现代码
下一篇：javascript中获取选中对象的类型

资讯排行榜
更多>>