axios post 传递数组_Fetch还是Axios——哪个更适合HTTP请求？

作者：杜尼卜 来源：SegmentFault 思否社区

---

前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在Javascript中进行API调用。

几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员通常会决定在 .fetch() API和Axios之间进行选择。

在本文中，我想比较这两种方法，并简要介绍一下基本知识和语法。除此之外，我还将比较在两种情况下以及在错误处理中将数据转换为JSON格式的过程。我还将讨论HTTP拦截和下载进度。

开始吧！

---

Fetch概述和语法

在构建Javascript项目时，我们可以使用window对象，并且它带有许多可以在项目中使用的出色方法。这些功能之一是Fetch API，它提供了一种简单的全局 .fetch() 方法，这是一种从API异步获取数据的逻辑解决方案。

让我们看一下 .fetch() 方法的语法。

fetch(url)
  .then((res) => 
    // handle response
  )
  .catch((error) => {
     
    // handle error
  })

在上面的示例中，您可以看到简单的获取GET请求的语法。在 .fetch() 方法中，我们有一个强制性参数url，它返回一个Promise，可以使用Response对象来解决。

.fetch() 方法的第二个参数是选项，它是可选的。如果我们不传递 options，请求总是GET，它从给定的URL下载内容。

在选项参数里面，我们可以传递方法或头信息，所以如果我们想使用POST方法或其他方法，我们必须使用这个可选的数组。

正如我之前提到的，Promise会返回Response对象，正因为如此，我们需要使用另一个方法来获取响应的主体。有几种不同的方法可以使用，取决于我们需要的格式：

• response.json()
• response.text()
• response.formData()
• response.blob()
• response.arrayBuffer()

让我们看一下带有可选参数的代码示例。

fetch(url, {
     
  method: 'POST',
  headers: {
     
    'Content-Type': 'ap