Типы потоков с обещаниями (Fetch's)

Итак, во-первых, отказ от ответственности, я пользователь TypeScript, но я считаю, что этот вопрос на самом деле применим к обоим языкам и имеет один и тот же ответ.

Я создал функцию Fetch для использования JSON API и определил типы для объекта JSON. Я запутался в том, как определить тип возвращаемого значения для функции getCurrentJobAPI, так как после этого я делаю кучу .then(). Является ли возвращаемое значение последним .then()? В моем коде последний .then() — это setState, так что же это за тип?

TL;DR: Promise<void> (см. примечание). Как вы подозреваете, на самом деле это возвращаемый тип последнего верхнего уровня .then в цепочке промисов.

Теперь давайте копнем немного глубже

Вот ваш пример, очень немного переработанный, чтобы использовать вывод типа вместо аннотирования параметров обратного вызова, которые объявлены их получателями как any.

Кроме того, эти аннотации параметров обратного вызова представляют собой небезопасные неявные приведения или утверждения типа, как мы называем их в TypeScript, и они лгут о форме кода. Они выглядят так

declare function takesFn(fn: (args: any) => any): void;

Поэтому я свел их к минимуму, так как они образуют скрытую ловушку

// @flow
import React from 'react';

type CurrentJob = {
    inventoryJob: Job,
    inventoryJobDetails: JobDetails[]
}

export default class A extends React.Component<{currentJob:JobDetails}, any> {

  getCurrentJobAPI: () => Promise<void> = () => {

        const url = `dummy_url&job_id=${String(this.props.currentJob)}`;

        return fetch(url, {credentials: 'include'})
            .then(response => {
                return (response : {json(): any}).json();
            }) // --> Promise<any>
            .then(json => {

                const currentJob = (json: CurrentJob); // make the assumption explicit.

                console.log(currentJob);

                const {location, id, note: ref_note} = currentJob.inventoryJob;

                const currentCodes = currentJob.inventoryJobDetails
                  .map(({code, qty}) => ({
                    code,
                    qty
                  }));

                this.setState({currentCodes, location, ref_note, id});
                return currentJob;
            }) // --> Promise<CurrentJob>
            .then(currentJob => {
                const apiBarcodes = currentJob.inventoryJob.history;
                if (apiBarcodes.length > 0) {
                    this.setState({apiBarcodes});
                }
                this.setState({initialLoad: true});
            }); // --> Promise<void>
    };
}

Итак, я делаю утверждения об обещаниях в каждом вызове then выше, но все эти утверждения проверяются выводом типа, за исключением начального типа, приведенного к значению ответа.

В качестве дополнительного доказательства, если мы удалим объявление типа из свойства getCurrentJobAPI для A, поток сделает вывод, что его тип на самом деле Promise<void>.

Бонус: упрощение с помощью async/await. Я использовал несколько функций ESNext выше, чтобы сократить код и сделать его более приятным, но мы можем использовать конкретную функцию, async/await, чтобы упростить понимание потока управления и типов в коде на основе Promise.

Рассмотрим эту ревизию.

// @flow
import React from 'react';

type CurrentJob = {
    inventoryJob: Job,
    inventoryJobDetails: JobDetails[]
}

export default class A extends React.Component<{currentJob:JobDetails}, any> {
    getCurrentJobAPI = async () => {

        const url = `dummy_url&job_id=${String(this.props.currentJob)}`;

        const response = await fetch(url, {credentials: 'include'});
        const json = await response.json();
        const currentJob = (json: CurrentJob); // make the assumption explicit.

        console.log(currentJob);

        const {location, id, note: ref_note} = currentJob.inventoryJob;

        const currentCodes = currentJob.inventoryJobDetails.map(({code, qty}) => ({
            code,
            qty
        }));

        this.setState({currentCodes, location, ref_note, id});


        const apiBarcodes = currentJob.inventoryJob.history;
        if (apiBarcodes.length > 0) {
            this.setState({apiBarcodes});
        }
        this.setState({initialLoad: true});

    };
}

Ясно, что это функция void. В нем нет операторов return. Однако, как функция async, она по своей сути возвращает Promise, точно так же, как если бы она была написана как явная цепочка Promise.

Примечание. void — это конструкция, которая оказалась полезной в Flow и TypeScript для представления семантического назначения функции, которая не возвращает значений, но на самом деле такие функции фактически возвращают undefined, потому что это JavaScript. Похоже, что Flow не распознает undefined как тип, но в TypeScript функция может быть также аннотирована как возвращающая Promise<undefined>. Тем не менее, Promise<void> предпочтительнее благодаря ясности намерений, которую он обеспечивает.

Примечания. Я работал над этим, используя комбинацию https://flow.org/try и двоичный файл потока для Windows. Опыт работы с Windows действительно ужасен, и, надеюсь, он улучшится.

При цепочке then результатом всегда будет обещание. При вызове then возвращаемое значение является другим обещанием, иначе цепочка then была бы невозможна. Вы можете легко увидеть это, используя console.log(), окружающий всю цепочку.