欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-02 14:50:16
...
传递信息到服务器,从服务器获取信息,是前端发展的重中之重,尤其是现在前后端分离的大前提下,前后端的数据交互是前端的必修科目了,下面这篇文章主要给大家介绍了关于JavaScript利用fetch实现异步请求的相关资料,需要的朋友可以参考借鉴。

前言

相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求。下面话不多说,来一起看看详细的介绍吧。

先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.3之后才支持,IE完全不支持。当然新技术的发展总会经历这个过程。

JavaScript如何使用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[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

以上就是JavaScript如何使用fetch来完成异步请求的实例介绍的详细内容,更多请关注其它相关文章!