Создание обертки выборки в Typescript - PullRequest
0 голосов
/ 06 октября 2019

Я пытаюсь создать оболочку для выборки в TypeScript, но не могу правильно набрать текст:

export interface ResponsePromise extends Promise<Response> {
  arrayBuffer(): Promise<ArrayBuffer>;
  blob(): Promise<Blob>;
  formData(): Promise<FormData>;
  json<T>(): Promise<T>;
  text(): Promise<string>;
}

class Api {
  public get(url: string, params = {}): ResponsePromise {
    const body = new URLSearchParams(params).toString();
    return fetch(url, {method: 'GET', body});
  }
}

const foo = async () => {
  const api = new Api();
  await api.get('http://www.example.com').json<any>();
}

Игровая площадка Typescript

1 Ответ

1 голос
/ 06 октября 2019

TypeScript уже содержит наборы для fetch, которые вы можете использовать повторно:

  • RequestInfo для параметра input (вы назвали его url,но fetch называет его input [ MDN , spec ], и это может быть не строка)
  • RequestInit для необязательного initпараметр (вы, кажется, не используете его в своем get)
  • Response для ответа.

Итак:

class Api {
  public get(input: RequestInfo, params = {}): Promise<Response> {
    const body = new URLSearchParams(params).toString();
    return fetch(input, {method: 'GET', body});
  }
}

В комментарии вы спросили:

как мне разрешить пользователю просто звонить await api.get().json()?

Это совсем другой вопрос, чем вопросо типах. Возможно, вы все равно вернете Promise<Response>, но вы реализуете обработчик then первого уровня в get (я все равно это делаю, потому что API fetch имеет недостатки, что приводит к множеству сбоев при обработке ошибок, так как Я опишу здесь .) Так, например:

class Api {
  public async get(input: RequestInfo, params = {}): Promise<Response> {
    const body = new URLSearchParams(params).toString();
    const response = await fetch(input, {method: 'GET', body});
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response;
  }
}

Поскольку Response реализует Body, на нем есть json() и т. Д. Если вы хотите, вы можете вернуть Promise<Body> вместо этого и вернуть .body:

class Api {
  public async get(input: RequestInfo, params = {}): Promise<Body> {
    const body = new URLSearchParams(params).toString();
    const response = await fetch(input, {method: 'GET', body});
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.body;
  }
}

... но я не думаю, что это вас что-нибудь купит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...