如何使用 JavaScript Fetch API 获取数据

笔记首页 >> 教程系列 >> 如何使用 JavaScript Fetch API 获取数据

如何使用 JavaScript Fetch API 获取数据

介绍

曾经有一段时间XMLHttpRequest用于发出 API 请求。它不包括承诺，也没有用于干净的 JavaScript 代码。使用 jQuery，您使用了更简洁的语法jQuery.ajax().

现在，JavaScript 有自己的内置方式来发出 API 请求。这就是 Fetch API，这是一种使用 promise 发出服务器请求的新标准，但包括许多其他功能。

在本教程中，您将使用 Fetch API 创建 GET 和 POST 请求。

先决条件

要完成本教程，您将需要以下内容：

您的机器上安装了最新版本的 Node。要在 macOS 上安装 Node，请按照如何在 macOS上安装 Node.js 和创建本地开发环境教程中概述的步骤操作。
对 JavaScript 编码的基本了解，您可以从“如何在 JavaScript 中编码”系列中了解更多信息。
理解 JavaScript 中的 promise。阅读本文的Promises 部分，了解JavaScript 中的事件循环、回调、promise 和 async/await。

第 1 步 – 开始使用 Fetch API 语法

要使用 Fetch API，请调用该fetch方法，该方法接受 API 的 URL 作为参数：

fetch(url)

在fetch()方法之后，包含 promise 方法then()：

.then(function() {

})

该fetch()方法返回一个承诺。如果返回的承诺是resolve，then()则执行方法中的函数。该函数包含用于处理从 API 接收到的数据的代码。

在then()方法下面，包括catch()方法：

.catch(function() {

});

您调用的 APIfetch()可能已关闭或可能发生其他错误。如果发生这种情况，rejectpromise 将被返回。该catch方法用于处理reject. catch()如果在调用您选择的 API 时发生错误，将执行其中的代码。

总而言之，使用 Fetch API 将如下所示：

fetch(url)
.then(function() {

})
.catch(function() {

});

了解使用 Fetch API 的语法后，您现在可以继续使用fetch()真正的 API。

第 2 步 – 使用 Fetch 从 API 获取数据

以下代码示例将基于Random User API。使用 API，您将获得 10 个用户并使用 Vanilla JavaScript 在页面上显示他们。

这个想法是从 Random User API 获取所有数据并将其显示在作者列表内的列表项中。首先创建一个 HTML 文件并添加一个带有idof的标题和无序列表authors：

<h1>Authors</h1>
<ul id="authors"></ul>

现在将script标签添加到 HTML 文件的底部并使用 DOM 选择器获取ul. 使用getElementByIdwithauthors作为参数。请记住，authors是id为先前创建的ul：

<script>

    const ul = document.getElementById('authors');

</script>

创建一个名为的常量变量url，该变量将保存将返回十个随机用户的 API URL：

const url = 'https://randomuser.me/api/?results=10';

随着ul和url到位，它的时间来创建将用来创建列表项的功能。创建一个名为的函数createNode，它接受一个名为的参数element：

function createNode(element) {

}

稍后，当createNode被调用时，您需要传递要创建的实际 HTML 元素的名称。

在该函数中，添加一条return返回elementusing的语句document.createElement()：

function createNode(element) {
    return document.createElement(element);
}

您还需要创建一个带有append两个参数的函数：parent和el：

function append(parent, el) {

}

此函数将附加el到parentusing document.createElement：

function append(parent, el) {
    return parent.appendChild(el);
}

双方createNode并append准备去。现在使用 Fetch API，使用fetch()withurl作为参数调用 Random User API ：

fetch(url)

fetch(url)
  .then(function(data) {

    })
  })
  .catch(function(error) {

  });

在上面的代码中，您正在调用 Fetch API 并将 URL 传递给 Random User API。然后收到响应。但是，您得到的响应不是 JSON，而是一个具有一系列方法的对象，这些方法可以根据您想对信息做什么来使用。要将返回的对象转换为 JSON，请使用json()方法。

添加then()将包含一个带有名为的参数的函数的方法resp：

fetch(url)
.then((resp) => )

该resp参数采用从返回的对象的值fetch(url)。使用json()方法转换resp成JSON数据：

fetch(url)
.then((resp) => resp.json())

JSON 数据仍然需要处理。添加另一个then()带有函数的语句，该函数具有一个名为的参数data：

.then(function(data) {

    })
})

在此函数中，创建一个名为的变量，该变量authors设置为data.results：

.then(function(data) {
    let authors = data.results;

对于中的每个作者authors，您需要创建一个列表项，显示他们的图片并显示他们的姓名。该map()方法非常适合：

let authors = data.results;
return authors.map(function(author) {

})

在您的map函数中，创建一个名为的变量，该变量li将被设置为等于createNodewith li（HTML 元素）作为参数：

return authors.map(function(author) {
    let li = createNode('li');
})

重复此操作以创建一个span元素和一个img元素：

let li = createNode('li');
let img = createNode('img');
let span = createNode('span');

该 API 为作者提供了一个名称以及与该名称一起出现的图片。设置img.src为作者图片：

let img = createNode('img');
let span = createNode('span');

img.src = author.picture.medium;

该span元素应包含的名字和姓氏author。该innerHTML属性和字符串插值将允许你这样做：

img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;

使用与元素一起创建的图像和列表元素span，您可以使用append之前创建的函数在页面上显示这些元素：

append(li, img);
append(li, span);
append(ul, li);

then()完成这两个功能后，您现在可以添加该catch()功能。此函数会将潜在错误记录到控制台：

.catch(function(error) {
  console.log(error);
});

这是您创建的请求的完整代码：

function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  let authors = data.results;
  return authors.map(function(author) {
    let li = createNode('li');
    let img = createNode('img');
    let span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = `${author.name.first} ${author.name.last}`;
    append(li, img);
    append(li, span);
    append(ul, li);
  })
})
.catch(function(error) {
  console.log(error);
});

您刚刚使用 Random User API 和 Fetch API 成功执行了 GET 请求。在下一步中，您将学习如何执行 POST 请求。

第 3 步 – 处理 POST 请求

Fetch 默认为 GET 请求，但您可以使用所有其他类型的请求、更改标头和发送数据。为此，您需要设置对象并将其作为 fetch 函数的第二个参数传递。

在创建 POST 请求之前，创建您想要发送到 API 的数据。这将是一个data使用键name和值Sammy（或您的名字）调用的对象：

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sammy'
}

确保包含一个常量变量，用于保存 Random User API 的链接。

由于这是一个 POST 请求，您需要明确说明。创建一个名为的对象fetchData：

let fetchData = { 

}

这个对象必须包括三个键：method，body，和headers。该method键应有的价值'POST'。body应该设置为等于data刚刚创建的对象。headers应具有以下值new Headers()：

let fetchData = {
  method: 'POST',
  body: data,
  headers: new Headers()
}

该Headers接口是 Fetch API 的一个属性，它允许您对 HTTP 请求和响应标头执行各种操作。如果您想了解更多相关信息，这篇名为如何在 Express 中定义路由和 HTTP 请求方法的文章可以为您提供更多信息。

有了此代码，就可以使用 Fetch API 发出 POST 请求。您将包含url和fetchData作为fetchPOST 请求的参数：

fetch(url, fetchData)

该then()函数将包含处理从随机用户 API 服务器收到的响应的代码：

fetch(url, fetchData)
.then(function() {
    // Handle response you get from the server
});

要创建对象并使用fetch()函数，还有另一种选择。fetchData您可以使用请求构造函数来创建请求对象，而不是像那样创建对象。为此，请创建一个名为的变量request：

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request =

该request变量应设置为等于new Request。该new Request构造采用两个参数：API url ( url) 和一个对象。对象还应包括method，body，和headers键一样fetchData：

var request = new Request(url, {
    method: 'POST', 
    body: data, 
    headers: new Headers()
});

现在，request可以用作唯一的参数，fetch()因为它还包含 API url：

fetch(request)
.then(function() {
    // Handle response we get from the API
})

总而言之，您的代码将如下所示：

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request = new Request(url, {
    method: 'POST', 
    body: data, 
    headers: new Headers()
});

fetch(request)
.then(function() {
    // Handle response we get from the API
})

现在您知道了使用 Fetch API 创建和执行 POST 请求的两种方法。

结论

尽管并非所有浏览器都支持 Fetch API，但它是 XMLHttpRequest 的绝佳替代品。如果您想学习如何使用 React 调用 Web API，请查看有关此主题的这篇文章。

觉得文章有用？

点个广告表达一下你的爱意吧！