提取如何实现请求的数据

一、前言

在传统的Ajax时代，API等网络请求是通过XMLHttpRequest或封装框架进行的。但是配置和调用的方式非常混乱，对初学者来说并不友好。我们今天介绍的Fetch提供了一种更好的替代方法，它不仅提供了一种跨网络异步获取资源的简单且符合逻辑的方法，而且可以被其他技术轻松使用，例如Service Workers。

其次，与Ajax进行比较

使用Ajax请求JSON数据通常是这样的：

var xhr=new XMLHttpRequest()；xhr.open('GET '，URL/文件，true)；xhr . onreadystatechange=function(){ if(xhr . readystate==4){ if(xhr . status==200){ var data=xhr . responsetext；console.log(数据)；}};xhr . onerror=function(){ console . log(' Oh，error ')；};xhr . send()；同样，我们使用fetch来请求JSON数据：

提取(网址)。然后(响应=响应。JSON())//被解析成可读的数据。然后(data=console.log(data))//如果执行结果是resolve，则调用then方法。catch (err=console。log ('oh，error '，Err))//当执行结果为reject时，调用catch方法。从它们之间的比较来看，提取代码要简单得多，业务逻辑也更清晰，这使得代码易于维护，可读性更强。

综上所述，Fetch的优势主要包括：

1.语法简洁，语义更丰富，业务逻辑更清晰

2.基于标准的Promise实现，它支持异步/等待

3.同构提取便于同构

三个承诺简介

由于Fetch API是基于Promise设计的，所以让我们简要介绍Promise工作流，以便更好地理解Fetch。

提取方法返回一个Promise对象。根据Promise Api的特点，fetch可以方便地通过then方法对所有处理逻辑进行字符串化。通过使用Promise.resolve()或Promise.reject()方法，将返回结果为正的Promise或结果为负的Promise，从而调用下一个then或catch。一旦语句中出现错误，它也会跳转到catch。

对通用数据格式的四个请求

接下来，我们将介绍如何使用fetch请求本地文本数据、本地JSON数据和网络接口。其实和Ajax相比，操作简单多了！

//HTML div class=' container ' h1 fetch API沙箱/h1button id=' button1 '请求本地文本数据button id=' button2 '请求本地json数据/Button button id='button3 '请求网络接口/Button brbr div ID=' output '/div/div脚本src=' http 3360 app . js '/script 1 . fetch请求本地文本数据

本地有一个test.txt文档，里面的数据可以通过下面的代码获取并显示在页面上。

document . getelementbyid(' button 1 ')。addEventListener('click '，getText)；函数gettext () {fetch ('test.txt ')。然后((RES)=res.text())//注意：这是RES . text()。然后(数据={console.log(数据)；document . getelementbyid(' output ')。innerHTML=数据；}) .catch(err=console . log(err))；}2 .获取请求本地JSON数据

本地有一个posts.json数据，不同于请求本地文本。获取数据后，应该由forEach遍历，最后呈现在页面上。

document . getelementbyid(' button 2 ')。addEventListener('click '，getJson)；函数getJson(){ fetch(' post . JSON ')。然后((res)=res.json())。然后(数据={ console.log(数据)；让输出=' '；data . foreach((post)={ output=` Li $ { post . title }/Li `；})document . getelementbyid(' output ')。innerHTML=输出；}) .catch(err=console . log(err))；}3 .从网络接口获取请求

从https://api.github.com/users获取数据的方法类似于获取本地JSON的方法。获取数据后，还需要进行处理

文件。getelementbyid('按钮3 ').addEventListener('click '，getExternal)；函数getExternal(){//https://API . github.com/users fetch(' https://API。github。com/users ').然后((res)=res.json()).然后（数据={ console.log(数据);让输出=' ';数据。foreach((用户)={ output=` Li $ { user。登录}/李`；})文档。getelementbyid(' output ').innerHTML=输出；}) .catch(err=console。log(err))；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。