几种http请求方式的理解, 附ABP的网络请求

董厂长

已于 2022-02-18 09:31:04 修改

阅读量1.6k

点赞数 1

分类专栏： angular 文章标签： http angular.js javascript

于 2022-02-10 16:23:45 首次发布

本文链接：https://blog.csdn.net/dongnihao/article/details/122862902

版权

angular 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

工作中写http请求时候，Angular官方就提供了http请求服务--(HttpClient Service)。HttpClient服务对象用于向指定的URL发起异步请求。

之前写Vue和React时候，都是直接用的Axios一把梭哈，Fetch没用过。个人理解是，Axios是基于Promise的。HttpClient Service是基于Observe，采用订阅模式。HttpClient是基于XMLHttpRequest 提供的接口。

工作中用的是ABP框架，它自带了封装好的http请求方法。

看了别人的文章，做一些总结

Fetch概述和语法

.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': 'application/json'
  },
  body: JSON.stringify(data)
});
  .then((response) => response.json())
  .catch((error) => console.log(error))

在上面的代码示例中，你可以看到简单的POST请求，包括 method、header 和 body params。然后我使用 json() 方法将响应转换为JSON格式。

Axios概述和语法

Axios是一个Javascript库，它是基于Promise的。

优势：对XSRF的保护或取消请求。（面试问过XSS和XSRF）

来看一个简单的GET方法的语法。其他的直接去看Axios官方文档。

axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

在上面的代码中，你可以看到我使用 .get() 方法创建一个简单的GET请求。如果你想在函数中使用POST方法，那么只需使用 .post() 方法代替，并将请求数据作为参数传递即可。

当我们创建配置对象时，我们可以定义一堆属性，最常见的是：

baseUrl
params
headers
auth
responseType

作为响应，axios 返回一个promise，该promise将与响应对象或错误对象一起解析。在响应对象中，具有以下值：

data，这是实际的响应主体
status，调用的HTTP状态，例如200或404
statusText，以文本消息形式返回的HTTP状态，例如 ok
headers，服务器发回标头
config，请求配置
request，XMLHttpRequest对象

JSON

如前所述，当我们在使用 .fetch() 方法的时候，需要对响应数据使用某种方法，当我们在发送带有请求的body时，需要对数据进行字符串化。

在 axios 中，它是自动完成的，所以我们只需在请求中传递数据或从响应中获取数据。它是自动字符串化的，所以不需要其他操作。

让我们看看如何从 fetch() 和 axios 获取数据。

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在上面的例子中，你可以看到，使用 axios 我们没有额外的一行代码，在 .fetch()的例子中，我们必须将数据转换为JSON格式。

错误处理

Axios 处理错误是非常容易的。如果出现像404这样的错误响应，promise就会被拒绝并返回一个错误，所以我们需要捕获一个错误，我们可以检查它是什么类型的错误，就是这样。让我们看看代码示例。

对于 .fetch() 方法，就比较复杂了。每次我们从 .fetch() 方法中得到响应时，我们需要检查状态是否成功，因为即使不是，我们也会得到响应。在 .fetch() 的情况下，只有当请求没有完成时，promise才会被解决。

为了方便和正确的错误处理，对于你的项目来说，axios 绝对会是一个更好的解决方案，但如果你正在构建一个只有一两个请求的小项目，使用 .fetch() 是可以的，但你需要记住正确处理错误。

下载进度

当我们需要下载大量的数据时，一种跟踪进度的方法会很有用，特别是当用户的网络速度很慢时。早期，为了实现进度指标，开发者使用了 XMLHttpRequest.onprogress 回调。在 .fetch() 和 axios 中，有不同的方法来实现。

为了在 .fetch() 中跟踪下载进度，我们可以使用其中一个 response.body 属性，一个 ReadableStream 对象。它逐块提供主体数据，并允许我们计算时间消耗了多少数据。

在axios中，实现一个进度指示器也是可能的，而且更容易，因为存在一个现成的模块，可以安装和实现，它叫做Axios Progress Bar。

HTTP拦截

在 axios 的情况下，HTTP拦截是这个库的关键功能之一，这就是为什么我们不需要创建额外的代码来使用它。让我们看一下代码示例，看看我们能做到多么容易。

.fetch() 默认不提供HTTP拦截功能，我们可以覆盖 .fetch() 方法，定义发送请求过程中需要发生的事情，当然，这需要更多的代码，可能比使用 axios 功能更复杂。

ABP的网络请求

UI/Angular/HTTP Requests | Documentation Center | ABP.IOhttps://docs.abp.io/en/abp/5.1/UI/Angular/HTTP-Requests

在Angular中华。HttpClient将错误处理留给调用者（方法）。换句话说，HTTP 错误是手动处理的，并通过挂钩Observable返回的观察者

虽然清晰灵活，但以这种方式处理错误是重复性工作，即使错误处理被委托给存储或任何其他可注入项也是如此。

HttpInterceptor能够捕获HttpErrorResponse并可用于集中式错误处理。然而，必须禁用默认错误处理程序（因此拦截器）的情况需要额外的工作和对 Angular 内部结构的理解。

ABP 核心模块有一个用于 HTTP 请求的实用服务：RestService. 除非另有明确配置，否则它会捕获 HTTP 错误并调度RestOccurError操作。这个动作然后ErrorHandler被ThemeSharedModule. 由于您应该已经在您的应用程序中导入了此模块，因此在RestService使用时，默认情况下会自动处理所有 HTTP 错误。

具体如何使用见上面的链接：

getFoo(id: number) {
  const request: Rest.Request<null> = {
    method: 'GET',
    url: '/api/some/path/to/foo/' + id,
  };

  return this.rest.request<null, FooResponse>(request);
}