Angular 简单封装HttpClient的超时处理

最新推荐文章于 2024-11-20 22:11:14 发布

原创

最新推荐文章于 2024-11-20 22:11:14 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #HttpClient #超时处理 #Promise #race

本文介绍了一种使用Promise.race()方法对HttpClient的get和post请求进行封装的技术，以实现请求超时处理。通过这种方式，无论是请求成功、失败还是超时，都能确保请求方法始终返回一个结果。

在项目中，为了给用户良好的体验，大部分数据请求都会要求尽快地拿到返回数据，不能让用户等待太长时间。

因此很多请求都进行了超时处理，超过了设置的时间就不再等待返回值了，提示用户采取后续操作。

本文分享的方法，使用Promise.race()对HttpClient的get方法和post方法做了简单封装，使之可以满足超时处理的需求。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor(private http: HttpClient) { }
      
   /**
   * 发送post请求
   * @param url 请求地址