Axios 与 Fetch 的关系？

2020-01-29 08:00:00 · 飞浪

了解如何使用 fetch() API 和 Axios 异步发出网络请求以及如何使用它们执行不同的操作。

介绍

前端应用程序的基本任务之一是通过 HTTP 协议与服务器通信。JavaScript 可以向服务器发送网络请求并在需要时加载新信息，而无需重新加载页面。

这种操作的术语是异步 JavaScript 和 XML (AJAX)，它使用XMLHttpRequest对象与服务器通信。它可以发送和接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。

在本指南中，我们将研究如何使用fetch() API和Axios发出网络请求从服务器异步获取信息，并了解如何使用它们执行不同的操作。

拿来

Fetch API 提供了一个 JavaScript 接口，用于访问和操作 HTTP 管道的各个部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单、合乎逻辑的方法来通过网络异步获取资源。

fetch ()方法接受一个强制参数 - 即要获取的资源的路径 - 并返回一个 Promise，该 Promise在服务器使用标头响应后立即使用内置Response类的对象进行解析。

下面的代码演示了一个非常基本的获取请求，我们通过网络获取 JSON 文件。

      fetch('examples/example.json')
  .then((response) => {
    // Do stuff with the response
  })
  .catch((error) => {
    console.log('Looks like there was a problem: \n', error);
  });
    

fetch()方法接受的第二个参数是请求对象。

      {
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, *cors, same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  headers: {
   'Content-Type': 'application/json'
  },
  redirect: 'follow', // manual, *follow, error
  referrerPolicy: 'no-referrer', // no-referrer, *client
  body: JSON.stringify(data) // body data type must match "Content-Type" header
}
    

一旦检索到响应，返回的对象包含以下属性：

response.body：一个简单的 getter，用于公开主体内容的 ReadableStream
response.bodyUsed：存储一个布尔值，声明主体是否已在响应中使用
response.headers：与响应关联的标头对象
response.ok：布尔值，表示响应是否成功
response.redirected：指示响应是否是重定向的结果
response.status：响应的状态代码
response.statusText：状态码对应的状态信息
response.type：响应的类型
response.url：响应的 URL

有多种方法可以定义各种格式的正文内容：

response.json()：将响应解析为 JSON
response.text()：读取响应并以文本形式返回
response.formData()：将响应作为FormData对象返回
response.blob()：将响应以Blob形式返回
response.arrayBuffer() ：以ArrayBuffer形式返回响应

Axios

Axios 是一个 Javascript 库，用于从node.js发出 http 请求或从浏览器发出XMLHttpRequests，并且支持 JS ES6 原生的 Promise API。

根据文档，Axios 的一些核心功能包括：

它可以用来拦截http请求和响应。
它自动转换请求和响应数据。
它能够实现针对XSRF 的客户端保护。
它内置了对下载进度的支持。
它可以取消请求。

Axios 不是原生 JavaScript API，因此我们必须手动将其导入到我们的项目中。首先，我们必须包含以下命令：

使用 CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Using npm npm install axios Using bower bower install axios

And make a request as follows:

      axios.get('examples/example.json')
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  })
    

Axios 还提供了更多功能来发出其他网络请求，匹配您希望执行的 HTTP 动词，例如：

axios.请求（配置）
axios.get（url [，配置]）
axios.delete（url [，配置]）
axios.head（url [，配置]）
axios.options（url [，配置]）
axios.post（url [，数据 [，配置]]）
axios.put（url [，数据 [，配置]]）
axios.patch（url [，数据 [，配置]]）

您可以在官方文档中查看全面的请求配置。

请求的响应包含以下信息：

response.data：服务器提供的响应
response.status：来自服务器响应的 HTTP 状态代码
response.statusText：来自服务器响应的 HTTP 状态消息
response.headers：服务器响应的标头
response.config ：为请求提供给axios的配置
response.request：生成此响应的请求

现在我们已经熟悉了axios和fetch()的定义和用法。让我们集中讨论如何使用 Axios 和 Fetch 执行一些实际操作。

JSON 数据

使用fetch()处理 JSON 数据时有两个步骤。首先，我们必须发出实际请求，然后在响应上调用.json()方法。

      fetch("examples/example.json") // first step
  .then(response => response.json()) // second step
  .then(data => {
    console.log(data)
  })
  .catch(error => console.error(error))
    

一旦请求被解析，Axios 就会自动转换 JSON 数据，因此我们不需要在这里做太多事情。

      axios
  .get("examples/example.json")
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
    

错误处理

使用 Axios 处理错误非常简单，因为错误的响应（如 404 或 500）将拒绝承诺。

      axios
  .get("examples/example.json")
  .then(response => {
    console.log("response", response)
  })
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data)
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request)
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log("Error", error.message)
    }
    console.log(error.config)
  })
    

使用fetch()时，评估响应是否成功尤为重要，因为错误响应（如 404 或 500）仍可解析。只有在请求无法完成时，fetch promise 才会被拒绝。代码如下所示：

      fetch("examples/example.json")
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText)
    }
    return response.json()
  })
  .then(data => {
    console.log(data)
  })
  .catch(error => console.error(error))
    

拦截请求和响应

Axios 的一个关键特性是它能够拦截 HTTP 请求。当我们想要检查或更改从应用程序到服务器的 HTTP 请求时，拦截器会非常有用，例如从本地存储中检索令牌并将其包含在所有请求中。

      // Add a request interceptor
axios.interceptors.request.use(

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}