angular 封装http请求 返回的是observable 为什么调用的变成了ZoneAwarePromise对象

发布于 2022-09-11 20:13:47 字数 3442 浏览 47 评论 0

api.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, isDevMode } from '@angular/core';
import { ToastService } from 'ng-zorro-antd-mobile';
import { UtilService } from '@/services/util.service';
import { of } from 'rxjs'
import { catchError } from 'rxjs/operators'


@Injectable()
export class ApiService {

  CODEMESSAGE = {
    0: 'Unknown Error',
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队(异步任务)。',
    204: '删除数据成功。',
    400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限(令牌、用户名、密码错误)。',
    403: '用户得到授权,但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除,且不会再得到的。',
    422: '当创建一个对象时,发生一个验证错误。',
    500: '服务器发生错误,请检查服务器。',
    502: '网关错误。',
    503: '服务不可用,服务器暂时过载或维护。',
    504: '网关超时。',
  };

  getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return unescape(arr[2]);
    else
      return null;
  }

  delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(name);
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toUTCString();
  }

  async request(method, url, data = {}, cb?: Function) {
    const headers = {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${this.getCookie('token')}`,
    };
    const trim = s => s === undefined || s === null ? '' : s;
    const args: any = [[
      window['baseUrl'],
      url.replace(/:([^&;/?]+)/g, (...s) => trim(data[s[1]])),
    ].join('/')];

    const params = Object.keys(data).reduce((obj, key) => {
      obj[key] = trim(data[key]);
      return obj;
    }, {});
    if (method === 'get' || method === 'delete') {
      // args.push({ headers, params });
      args.push({ headers, params, observe: "response", responseType: "json" });
    } else {
      args.push(params, { headers, observe: "response", responseType: "json" });
      // console.log(args)
    }

    console.log( this.http[method](...args))
    return this.http[method](...args)
  }

  checkStatus(ev) {
    if ((ev.status >= 200 && ev.status < 300) || ev.status === 401) {
      return;
    } else {
      const errortext = this.CODEMESSAGE[ev.status] || ev.statusText;
      // ToastService.show(`请求错误 ${ev.status}: ${errortext}`, 2000);
    }
  }


  delete = (url) => (data?, cb?) => this.request('delete', url, data, cb);
  get = (url) => (data?, cb?) => this.request('get', url, data, cb)
  patch = (url) => (data?, cb?) => this.request('patch', url, data, cb);
  post = (url) => (data?, cb?) => this.request('post', url, data, cb);
  put = (url) => (data?, cb?) => this.request('put', url, data, cb);



  constructor(
    private http: HttpClient,
    private util: UtilService,
    private toast: ToastService,
  ) { }
}

component 中

    getData(index?) {
        this.isLoading = true;
        this.currentPage = index;
        if (this.currentPage == 1) {
            this.state.direction = ''
        }

        console.log(this.api.get(`appointment-store-records?q[appointment_date]=${this.appointment_date_text}&q[status]=${this.tab_status}`)({}));
    }

clipboard.png

是在不明白是为什么 求大神指点

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

人生戏 2022-09-18 20:13:47

因为this.api.get方法返回一个函数,柯里化函数,这个函数其实就是ApiService.request,而ApiService.request被async修饰,async函数必定返回Promise。

this.http是httpClient,其调用会返回Observable对象,虽然Observable对象可以通过toPromise转换为Promise对象,但好像不大可能会自动转。所以有可能ApiService.request只是把Observable对象简单包装为Promise返回(Promise.resolve)。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文