Vue3-秘籍-三-Vue3 秘籍（三）第五章：通过 HTTP 请求从网络获取数据数据现在是日常生活的一部分。如果没

Vue3 秘籍（三）

原文：zh.annas-archive.org/md5/915E62C558C25E5846A894A1C2157B6C

译者：飞龙

协议：CC BY-NC-SA 4.0

第五章：通过 HTTP 请求从网络获取数据

数据现在是日常生活的一部分。如果没有数据，你就不会读到这本书，也不会试图了解更多关于 Vue 的知识。

了解如何在应用程序中获取和发送数据是开发人员的要求，而不仅仅是一个额外的技能。学习的最佳方式是通过实践，并找出它在幕后是如何完成的。

在这一章中，我们将学习如何使用 Fetch API 和当前最流行的 API 库axios来构建自己的 API 数据操作。

在这一章中，我们将涵盖以下的配方：

创建一个 Fetch API 的 HTTP 客户端包装器
创建一个随机猫图片或 GIF 组件
使用MirageJS创建本地虚拟 JSON API 服务器
使用axios作为新的 HTTP 客户端
创建不同的axios实例
为axios创建请求和响应拦截器
使用axios和Vuesax创建 CRUD 接口

技术要求

在这一章中，我们将使用 Node.js 和 Vue CLI。

注意，Windows 用户！你需要安装一个名为windows-build-tools的 NPM 包，以便能够安装以下所需的包。要做到这一点，以管理员身份打开 PowerShell 并执行以下命令：

> npm install -g windows-build-tools

要安装 Vue CLI，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

创建一个 Fetch API 的 HTTP 客户端包装器

Fetch API 是旧的XMLHttpRequest的子代。它有一个改进的 API 和一个基于Promises的新而强大的功能集。

Fetch API 既简单又基于两个对象Request和Response的通用定义，使其可以在浏览器中的任何地方使用。浏览器的 Fetch API 也可以在window或service worker中执行。对于这个 API 的使用没有限制。

在这个配方中，我们将学习如何创建一个 Fetch API 的包装器，使 API 调用更简单。

准备工作

这个配方的先决条件如下：

Node.js 12+

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

如何做...

要开始我们的组件，我们可以使用在第二章中创建的使用 Vue CLI 创建的 Vue 项目，或者我们可以开始一个新的项目。

要开始一个新的项目，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create http-project

CLI 将询问一些问题，这些问题将有助于创建项目。您可以使用箭头键导航，Enter键继续，Spacebar选择选项。选择default选项：

?  Please pick a preset: **(Use arrow keys)** ❯ default (babel, eslint) 
  Manually select features  ‌

创建包装器

首先，我们需要创建一个新的 API 包装器来在这个教程中使用。这将是我们将在所有 HTTP 方法中使用的主要文件。

让我们按照以下步骤创建基本包装器：

在src/http文件夹中创建一个名为baseFetch.js的新文件。
我们将创建一个异步函数，它将作为参数接收url，method和options的三个变量。这将是一个柯里化函数，第二个函数将接收type作为参数：

export default async (url, method, options = {}) => {
  let httpRequest;
  if (method.toUpperCase() === 'GET') {
  httpRequest = await fetch(url, {
  cache: 'reload',
  ...options,
  });
  } else {
  httpRequest = fetch(url, {
  method: method.toUpperCase(),
  cache: 'reload',
  ...options,
  });
  }
  return (type) => {
  switch (type.toLocaleLowerCase()) {
  case 'json':
  return httpRequest.json();
  case 'blob':
  return httpRequest.blob();
  case 'text':
  return httpRequest.text();
  case 'formdata':
  return httpRequest.formData();
  default:
  return httpRequest.arrayBuffer();
  }
 }; };

创建 API 方法

现在我们需要制作我们的 HTTP 方法函数。这些函数将使用包装器来执行浏览器的 Fetch API 并返回响应。

按照以下步骤创建每一个 API 方法调用：

在src/http文件夹中创建一个名为fetchApi.js的新文件。
我们需要从我们在第一步创建的文件中导入baseHttp：

import baseHttp from './baseFetch';

现在在接下来的部分，我们将创建我们包装器中可用的每一个 HTTP 方法。

GET 方法函数

在这些步骤中，我们将创建HTTP GET方法。按照以下每一条指示来创建getHttp函数：

创建一个名为getHttp的常量。
定义一个常量作为一个异步函数，接收三个参数，url，type和options。type参数将默认值为'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url，'get'作为第二个参数，options作为第三个参数，并立即执行带有我们收到的type参数的函数：

export const getHttp = async (url, type = 'json', options) => (await   
   baseHttp(url, 'get', options))(type);

POST 方法函数

在这部分，我们将创建HTTP POST方法。按照以下步骤来创建postHttp函数：

创建一个名为postHttp的常量。
将一个异步函数分配给该常量，该函数接收四个参数，url、body、type和options。type参数将具有默认值'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url参数和'post'作为第二个参数。在第三个参数中，我们将传递一个带有body变量和我们收到的解构options参数的对象。由于baseHttp的柯里化属性，我们将使用收到的type参数执行返回的函数。body通常是 JSON 或 JavaScript 对象。如果这个请求将是文件上传，body需要是一个FormData对象：

export const postHttp = async (
  url,
  body,
  type = 'json',
  options,
) => (await baseHttp(url,
  'post',
  {
 body,
  ...options,
  }))(type);

PUT 方法函数

现在我们正在创建一个HTTP PUT方法。使用以下步骤创建putHttp函数：

创建一个名为putHttp的常量。
将一个异步函数分配给该常量，该函数接收四个参数，url、body、type和options。type参数将具有默认值'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url和'put'作为第二个参数。在第三个参数中，我们将传递一个带有body变量和我们收到的解构options参数的对象。由于baseHttp的柯里化属性，我们将使用收到的type参数执行返回的函数。body通常是 JSON 或 JavaScript 对象，但如果这个请求将是文件上传，body需要是一个FormData对象：

export const putHttp = async (
  url,
  body,
  type = 'json',
  options,
) => (await baseHttp(url,
  'put',
  {
 body,
  ...options,
  }))(type);

PATCH 方法函数

是时候创建一个HTTP PATCH方法了。按照以下步骤创建patchHttp函数：

创建一个名为patchHttp的常量。
将一个异步函数分配给该常量，该函数接收四个参数，url、body、type和options。type参数将具有默认值'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url和'patch'作为第二个参数。在第三个参数中，我们将传递一个带有body变量和我们收到的解构options参数的对象。由于baseHttp的柯里化属性，我们将使用收到的type执行返回的函数。body通常是 JSON 或 JavaScript 对象，但如果这个请求将是文件上传，body需要是一个FormData对象：

export const patchHttp = async (
  url,
  body,
  type = 'json',
  options,
) => (await baseHttp(url,
  'patch',
  {
 body,
  ...options,
  }))(type);

更新方法函数

在这一部分，我们正在创建一个HTTP UPDATE方法。按照以下步骤创建updateHttp函数：

创建一个名为updateHttp的常量。
将一个异步函数分配给该常量，该函数接收四个参数，url、body、type和options。type参数将具有默认值'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url和'update'作为第二个参数。在第三个参数中，我们将传递一个带有body变量和我们收到的解构options参数的对象。由于baseHttp的柯里化属性，我们将使用收到的type执行返回的函数。body通常是 JSON 或 JavaScript 对象，但如果这个请求将是文件上传，body需要是一个FormData对象：

export const updateHttp = async (
  url,
  body,
  type = 'json',
  options,
) => (await baseHttp(url,
  'update',
  {
 body,
  ...options,
  }))(type);

DELETE 方法函数

在这最后一步，我们将创建一个DELETE HTTP方法。按照以下步骤创建deleteHttp函数：

创建一个名为deleteHttp的常量。
将一个异步函数分配给该常量，该函数接收四个参数，url、body、type和options。类型参数将具有默认值'json'。
在这个函数返回中，我们将执行baseHttp函数，传递我们收到的url和'delete'作为第二个参数。在第三个参数中，我们将传递一个带有body变量和我们收到的解构options参数的对象。由于baseHttp的柯里化属性，我们将使用收到的type执行返回的函数。body通常是 JSON 或 JavaScript 对象，但如果这个请求将是文件上传，body需要是一个FormData对象：

export const deleteHttp = async (
 url,
  body,
  type = 'json',
  options,
) => (await baseHttp(url,
  'delete',
  {
 body,
  ...options,
  }))(type);

它是如何工作的...

在这个教程中，我们为window元素上呈现的Fetch API 创建了一个包装器。这个包装器由一个柯里化和闭包函数组成，第一个函数接收 Fetch API 的 URL 数据、方法和选项，而结果函数是 Fetch API 的响应转换器。

在包装器中，函数的第一部分将创建我们的fetch请求。在那里，我们需要检查它是否是GET方法，所以我们只需要用url参数执行它并省略其他参数。函数的第二部分负责将fetch响应转换。它将在type参数之间切换，并根据正确的参数执行检索函数。

要接收请求的最终数据，您始终需要在请求之后调用响应翻译器，就像以下示例中一样：

getHttp('https://jsonplaceholder.typicode.com/todos/1', 'json').then((response) => { console.log(response)); }

这将从 URL 获取数据，并将响应转换为 JSON/JavaScript 对象。

我们制作的第二部分是方法翻译器。我们为每个 REST 动词制作了函数，以便更轻松地使用。 GET 动词没有能力传递任何body，但所有其他动词都能够在请求中传递body。

另请参阅

你可以在developer.mozilla.org/en-US/docs/Web/API/Fetch_API找到有关 Fetch API 的更多信息。

您可以在developer.mozilla.org/en-US/docs/Web/API/FormData/FormData找到有关 FormData 的更多信息。

您可以在developer.mozilla.org/en-US/docs/Web/API/Body/body找到有关 Fetch 响应主体的更多信息。

您可以在developer.mozilla.org/en-US/docs/Web/API/Headers找到有关标头的更多信息。

您可以在developer.mozilla.org/en-US/docs/Web/API/Request找到有关请求的更多信息。

创建一个随机猫图像或 GIF 组件

众所周知，互联网上有许多猫的 GIF 和视频。我相信如果我们删除所有与猫有关的内容，我们将会出现网络黑屏。

了解有关 Fetch API 以及如何在组件内使用它的最佳方法是制作一个随机猫图像或 GIF 组件。

准备工作

此示例的先决条件如下：

Node.js 12+

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

如何做...

要启动我们的组件，我们可以使用在“*将 Fetch API 包装为 HTTP 客户端”配方中使用的 Vue 项目和 Vue CLI，或者我们可以启动一个新的项目。

要启动新的项目，打开 Terminal（macOS 或 Linux）或 Command Prompt/PowerShell（Windows），并执行以下命令：

> vue create http-project

CLI 将询问一些问题，这些问题将有助于创建项目。您可以使用箭头键导航，Enter键继续，Spacebar选择选项。选择default选项：

?  Please pick a preset: **(Use arrow keys)** ❯ default (babel, eslint) 
  Manually select features  ‌

创建组件

在本教程中，我们将使用第四章组件、混合和功能组件中创建的组件进行视觉元素。您也可以使用简单的 HTML 元素来实现相同的结果。

我们将把这个组件的创建分为三个步骤：<script>、<template>和<style>。

单文件组件`<script>`部分

按照以下步骤创建单文件组件的<script>部分：

在src/components文件夹中创建一个名为RandomCat.vue的新文件并打开它。
从我们在'将 Fetch API 包装为 HTTP 客户端创建包装器'教程中制作的fetchApi包装器中导入getHttp函数：

import { getHttp } from '../http/fetchApi';

在component属性中异步导入MaterialButton和MaterialCardBox组件：

components: {
  MaterialButton: () => import('./MaterialButton.vue'),
  MaterialCardBox: () => import('./MaterialCardBox.vue'), },

在data属性中，我们需要创建一个名为kittyImage的新数据值，默认为空字符串：

data: () => ({
  kittyImage: '', }),

在methods属性中，我们需要创建getImage方法，它将以Blob的形式获取图片，并将其作为URL.createObjectURL返回。我们还需要创建newCatImage方法，它将获取一张新的猫的静态图片，以及newCatGif方法，它将获取一个新的猫的 GIF：

methods: {
  async getImage(url) {
  return URL.createObjectURL(await getHttp(url, 'blob'));
  },
  async newCatImage() {
  this.kittyImage = await this.getImage('https://cataas.com/cat');
  },
  async newCatGif() {
  this.kittyImage = await 
          this.getImage('https://cataas.com/cat/gif');
  },
  },

在beforeMount生命周期钩子中，我们需要将其设置为异步，并执行newCatImage方法：

async beforeMount() {
  await this.newCatImage();
  },

单文件组件`<template>`部分

按照以下步骤创建单文件组件的<template>部分：

首先，我们需要添加带有标题和副标题的MaterialCardBox组件，激活media和action部分，并为media和action创建<template>命名插槽：

<MaterialCardBox
  header="Cat as a Service"
  sub-header="Random Cat Image"
  show-media
 show-actions >
 <template
  v-slot:media>  </template>
 <template v-slot:action>  </template> </MaterialCardBox>

在<template>中名为media的插槽中，我们需要添加一个<img>元素，它将接收一个 URIBlob，当kittyImage变量中有任何数据时，它将显示出来，否则将显示一个加载图标：

<img
  v-if="kittyImage"
  alt="Meow!"
 :src="kittyImage"
  style="width: 300px;" >
 <p v-else style="text-align: center">
 <i class="material-icons">
  cached
   </i>
 </p>

在<template>中名为action的插槽中，我们将创建两个按钮，一个用于获取猫的图片，另一个用于获取猫的 GIF，两者都将在@click指令上有一个事件监听器，调用一个函数来获取相应的图片：

<MaterialButton
  background-color="#4ba3c7"
  text-color="#fff"
  @click="newCatImage" >
 <i class="material-icons">
  pets
  </i> Cat Image
</MaterialButton> <MaterialButton
  background-color="#005b9f"
  text-color="#fff"
  @click="newCatGif" >
 <i class="material-icons">
  pets
  </i> Cat GIF
</MaterialButton>

单文件组件`<style>`部分

在组件的<style>部分中，我们需要设置body font-size以便基于rem和em进行 CSS 样式计算：

<style>
  body {
  font-size: 14px;
  } </style>

启动和运行您的新组件

按照以下步骤将您的组件添加到 Vue 应用程序中：

在src文件夹中的App.vue文件中打开。
在components属性中，异步导入RandomCat.vue组件：

<script> export default {   name: 'App',
  components: {
  RandomCat: () => import('./components/RandomCat'),
  }, }; </script>

在文件的<template>部分中，声明导入的组件：

<template>
 <div id="app">
 <random-cat />
 </div> </template>

要运行服务器并查看您的组件，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm run serve

这是您的组件呈现并运行的方式：

它是如何工作的...

使用getHttp包装器，组件能够获取 URL 并将其作为Blob类型检索出来。有了这个响应，我们可以使用URL.createObjectUrl导航方法，并将Blob作为参数传递，以获取一个有效的图像 URL，该 URL 可以用作src属性。

另请参阅

您可以在developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL找到有关URL.createObjectUrl的更多信息。

您可以在developer.mozilla.org/en-US/docs/Web/API/Body/blob找到有关Blob响应类型的更多信息。

使用 MirageJS 创建您的虚假 JSON API 服务器

为了测试、开发或设计而伪造数据总是一个问题。在开发阶段展示应用程序时，您需要有一个大的 JSON 或者制作一个自定义服务器来处理任何数据更改。

现在有一种方法可以帮助开发人员和 UI 设计师在不需要编写外部服务器的情况下实现这一点 - 一个名为 MirageJS 的新工具，它是在浏览器上运行的服务器模拟器。

在这个配方中，我们将学习如何使用 MirageJS 作为模拟服务器并在其上执行 HTTP 请求。

准备工作

此配方的先决条件如下：

Node.js 12+

所需的 Node.js 全局对象如下：

@vue/cli
@vue/cli-service-global

如何做...

要启动我们的组件，我们可以使用我们在“将 Fetch API 作为 HTTP 客户端创建包装器”配方中使用的 Vue 项目和 Vue CLI，或者我们可以启动一个新的项目。

要启动一个新项目，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create visual-component

CLI 将询问一些问题，这将有助于创建项目。您可以使用箭头键进行导航，使用Enter键继续，使用Spacebar选择选项。选择default选项：

?  Please pick a preset: **(Use arrow keys)** ❯ default (babel, eslint) 
  Manually select features  ‌

创建模拟服务器

在这个配方中，我们将使用在“将 Fetch API 包装为 HTTP 客户端的创建包装器”配方中制作的fetchApi包装器的getHttp函数。

通过下一步和部分来创建您的MirageJS模拟服务器：

将MirageJS服务器安装到您的软件包中。您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install --save miragejs

本配方使用的版本是 0.1.32。注意MirageJS的任何更改，因为目前还没有当前的 LTS 版本。

现在在接下来的部分中，我们将创建每一个由 MirageJS 服务器模拟的 HTTP 方法。

创建模拟数据库

在这一部分，我们将创建一个MirageJS数据库，用于存储临时数据。按照以下步骤创建它：

在src/server文件夹中创建一个名为db.js的新文件，用于初始加载的数据。
我们需要为这个文件创建一个 JavaScript 对象作为默认导出，其中包含我们希望服务器具有的初始数据：

export default {
  users: [
 {  name: 'Heitor Ramon Ribeiro',
  email: 'heitor@example.com',
  age: 31,
  country: 'Brazil',
  active: true,
  },
  ], };

创建 GET 路由函数

在这一部分，我们将创建一个由MirageJS服务器模拟的HTTP GET方法。按照以下步骤创建它：

对于GET方法，我们需要在src/server文件夹中创建一个名为get.js的新文件。
对于这个配方，我们将创建一个通用的getFrom函数，该函数接收一个键作为参数并返回一个函数。这个返回的函数返回一个直接指向本地数据库的指定键：

export const getFrom = key => ({ db }) => db[key];   export default {
  getFrom, };

创建 POST 路由函数

在这一部分，我们将创建HTTP POST方法，这将由MirageJS服务器模拟。按照以下步骤创建它：

对于POST方法，我们需要在src/server文件夹中创建一个名为post.js的新文件。
对于这个配方，我们将创建一个通用的postFrom函数，该函数接收一个键作为参数并返回一个函数。这个返回的函数将解析 HTTP 请求体的data属性，并返回服务器模式的内部函数，将数据插入数据库。使用key参数，模式知道我们正在处理哪个表：

export const postFrom = key => (schema, request) => {
  const { data } = typeof request.requestBody === 'string'
  ? JSON.parse(request.requestBody)
  : request.requestBody;    return schema.db[key].insert(data); };   export default {
  postFrom, };

创建 PATCH 路由函数

在本节中，我们将创建MirageJS服务器模拟的HTTP PATCH方法。按照以下步骤创建它：

对于PATCH方法，我们需要在src/server文件夹中创建一个名为patch.js的新文件。
对于这个配方，我们将制作一个通用的patchFrom函数，该函数接收一个键作为参数并返回一个函数。返回的函数将解析 HTTP 请求体的data属性，并返回一个服务器模式的内部函数，该函数更新具有与数据一起传递的id属性的特定对象。使用key参数，模式知道我们正在处理哪个表：

export const patchFrom = key => (schema, request) => {
  const { data } = typeof request.requestBody === 'string'
  ? JSON.parse(request.requestBody)
  : request.requestBody;    return schema.db[key].update(data.id, data); };   export default {
  patchFrom, };

创建 DELETE 路由函数

在本节中，我们将创建MirageJS服务器模拟的HTTP DELETE方法。按照以下步骤创建它：

对于DELETE方法，我们需要在src/server文件夹中创建一个名为delete.js的新文件。
对于这个配方，我们将制作一个通用的patchFrom函数，该函数接收一个键作为参数并返回一个函数。返回的函数将解析 HTTP 请求体的data属性，并返回一个服务器模式的内部函数，该函数删除具有通过路由REST参数传递给服务器的id属性的特定对象。使用key参数，模式知道我们正在处理哪个表：

export const deleteFrom = key => (schema, request) => 
   schema.db[key].remove(request.params.id);   export default {
  deleteFrom, };

创建服务器

在本节中，我们将创建MirageJS服务器和可用的路由。按照以下步骤创建服务器：

在src/server文件夹中创建一个名为server.js的新文件。
接下来，我们需要导入Server类，baseData和路由方法：

import { Server } from 'miragejs'; import baseData from './db'; import { getFrom } from './get'; import { postFrom } from './post'; import { patchFrom } from './patch'; import { deleteFrom } from './delete';

创建一个全局变量server，并将此变量设置为Server类的新执行：

window.server = new Server({});

在Server类的构造选项中，添加一个名为seeds的新属性。此属性是一个接收服务器（srv）作为参数并执行srv.db.loadData函数传递baseDate作为参数的函数：

seeds(srv) {
 srv.db.loadData({ ...baseData }); },

现在我们需要添加相同的构造选项到一个名为routes的新属性中，它将创建模拟服务器路由。这个属性是一个函数，在函数体内，我们需要设置模拟服务器的namespace和服务器响应的毫秒延迟。将有四个路由。对于创建路由，我们将创建一个名为/users的新路由，监听POST方法。对于读取路由，我们将创建一个名为/users的新路由，监听GET方法。对于更新路由，我们将创建一个名为/users/:id的新路由，监听PATCH方法，最后，对于删除路由，我们将创建一个名为/users的新路由，监听DELETE方法：

routes() {
  this.namespace = 'api';    this.timing = 750;    this.get('/users', getFrom('users'));    this.post('/users', postFrom('users'));    this.patch('/users/:id', patchFrom('users'));    this.delete('/users/:id', deleteFrom('users'));
  },

添加到应用程序

在这一部分，我们将MirageJS服务器添加到 Vue 应用程序中。按照以下步骤使服务器对您的 Vue 应用程序可用：

在src文件夹中打开main.js文件。
我们需要将服务器声明为第一个导入声明，这样它就可以在应用程序的初始加载时可用：

import './server/server'; import Vue from 'vue'; import App from './App.vue';   Vue.config.productionTip = false;   new Vue({
  render: h => h(App), }).$mount('#app');

创建组件

现在我们有了服务器，我们需要测试它。为了这样做，我们将创建一个简单的应用程序，运行每个 HTTP 方法，并显示每个调用的结果。

在接下来的部分，我们将创建一个简单的 Vue 应用程序。

单文件组件`<script>`部分

在这部分，我们将创建单文件组件的<script>部分。按照以下步骤创建它：

在src文件夹中打开App.vue文件。
从我们在'将 Fetch API 包装为 HTTP 客户端的创建包装器'中制作的fetchHttp包装器中导入getHttp，postHttp，patchHttp和deleteHTTP方法：

import {
  getHttp,
  postHttp,
  patchHttp,
  deleteHttp, } from './http/fetchApi';

在data属性中，我们需要创建三个新属性来使用，response，userData和userId：

data: () => ({
  response: undefined,
  userData: '',
  userId: undefined,
  }),

在methods属性中，我们需要创建四个新方法，getAllUsers，createUser，updateUser和deleteUser：

methods: {
  async getAllUsers() {
 },
  async createUser() {
 },
  async updateUser() {
 },
  async deleteUser() {
 }, },

在getAllUsers方法中，我们将设置响应数据属性为api/users路由的getHttp函数的结果：

async getAllUsers() {
  this.response = await getHttp(`${window.location.href}api/users`); },

在createUser方法中，我们将接收一个data参数，这将是一个对象，我们将把它传递给api/users路由上的postHttp，然后执行getAllUsers方法：

async createUser(data) {
  await postHttp(`${window.location.href}api/users`, { data });
  await this.getAllUsers(); },

对于updateUser方法，我们将接收一个data参数，这将是一个对象，我们将其传递给patchHttp，在api/users/:id路由上使用对象上的id属性作为路由上的:id。之后，我们将执行getAllUsers方法：

async updateUser(data) {
  await patchHttp(`${window.location.href}api/users/${data.id}`, 
     { data });
  await this.getAllUsers(); },

最后，在deleteUser方法中，我们接收用户id作为参数，该参数是一个数字，然后我们将其传递给deleteHttp，在api/users/:id路由上使用 ID 作为:id。之后，我们执行getAllUsers方法：

async deleteUser(id) {
  await deleteHttp(`${window.location.href}api/users/${id}`, {}, 'text');
  await this.getAllUsers(); },

Vue3-秘籍-三-

Vue3 秘籍（三）

第五章：通过 HTTP 请求从网络获取数据

技术要求

创建一个 Fetch API 的 HTTP 客户端包装器

准备工作

如何做...

创建包装器

创建 API 方法

GET 方法函数

POST 方法函数

PUT 方法函数

PATCH 方法函数

更新方法函数

DELETE 方法函数

它是如何工作的...

另请参阅

创建一个随机猫图像或 GIF 组件

准备工作

如何做...

创建组件

单文件组件<script>部分

单文件组件<template>部分

单文件组件<style>部分

启动和运行您的新组件

它是如何工作的...

另请参阅

使用 MirageJS 创建您的虚假 JSON API 服务器

准备工作

如何做...

创建模拟服务器

创建模拟数据库

创建 GET 路由函数

创建 POST 路由函数

创建 PATCH 路由函数

创建 DELETE 路由函数

创建服务器

添加到应用程序

创建组件

单文件组件<script>部分

单文件组件

单文件组件`<script>`部分

单文件组件`<template>`部分

单文件组件`<style>`部分

单文件组件`<script>`部分