带有 Promise 的流类型（Fetch 的）

Question

我创建了一个 Fetch 函数来使用 JSON API，并为 JSON 对象定义了类型。我对如何定义getCurrentJobAPI 函数的返回类型感到困惑，因为我之后做了一堆.then()。返回值是最后一个 .then() 吗？在我的代码中，最后一个 .then() 是一个 setState，那么它的类型是什么？

    getCurrentJobAPI = (): {} => {

        const url: string = `dummy_url&job_id=${this.props.currentJob}`;

        return fetch(url, {credentials: 'include'})
            .then((response) => {
                return response.json();
            })
            .then((json: CurrentJob) => {
                console.log(json);
                const location = json.inventoryJob.location;
                const ref_note = json.inventoryJob.note;
                const id = json.inventoryJob.id;
                const models = json.inventoryJobDetails.map((j) => {
                    return Object.assign({}, {
                        code: j.code,
                        qty: j.qty
                    })
                });
                this.setState({ currentCodes: models, location: location, ref_note: ref_note, id: id})
                return json
            })
            .then((json: CurrentJob) => {
            const barcodes = json.inventoryJob.history;
            if (barcodes.length > 0) {
                this.setState({apiBarcodes: barcodes})
            }
            this.calculateRows();
            this.insertApiBarcodes();
            this.setState({ initialLoad: true });
            })
    };

更新：

虽然我知道我应该将Promise<type> 定义为getCurrentJobAPI 的返回值（参见Gilad 的答案和cmets），但我仍然不确定为什么我不能写Promise<CurrentJob> 如果Fetch 解析为 JSON 响应。

[根据loganfsmyth 的建议，我已经压缩了我的 .then() 语句。]

这里是CurrentJob的类型定义：

type Job = {
    user_id: number,
    status: 'open' | 'closed',
    location: 'string',
    history: {[number]: string}[],
    note: string,
} & CommonCurrentJob;

type JobDetails = {
    iaj_id: number,
    code: number,
} & CommonCurrentJob;


type CommonCurrentJob = {
    id: number,
    qty: number,
    qty_changed: number,
    created_at: string,
    updated_at: string
}

Answer 1

首先，免责声明，我是 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 调用中对承诺进行断言，但是这些断言都通过类型推断进行验证，除了响应值的初始类型转换。

作为进一步的证据，如果我们从A 的getCurrentJobAPI 属性中删除类型声明，流将推断其类型实际上是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 上的体验真的很糟糕，希望它会有所改善。

Answer 2

当链接 then 时，结果将始终是一个承诺。 调用then 时，返回值是另一个promise，否则不可能链接then。 您可以通过使用围绕整个链的 console.log() 轻松看到这一点。