JavaScript利用fetch实现异步请求的方法实例
28 浏览量
2020-12-02
17:41:35
上传
评论
收藏 111KB PDF 举报
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 = '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的主要优点是
评论0