Question

我有以下代码尝试执行AJAX请求，然后解码有效负载，同时始终保持类型：

export function fetchJson<T>(url: string, data: FetchDataTypes): Promise<T> {
    return new Promise((resolve, reject) => {
        fetch(url, {})
            .then((response: Response) => {
                if (!response.ok) {
                    reject(response);
                } else {
                    return response.text() as Promise<string>;
                }
            })
            .then((text: string) => {
                try {
                    resolve(JSON.parse(text) as T);
                } catch (err) {
                    reject(err);
                }
            })
            .catch((err: Promise<void>) => reject(err));
    });
}

问题是eslint抛出此错误：

预期在箭头函数consistent-return的末尾返回一个值

我看了一下文档，我很确定这是因为第一个.then回调在返回/不返回中存在不一致。我试图将我的代码变异为有回报或没有回报，但是我一生都无法弄清楚如何重写此代码以使eslint再次开心。

我能找到的所有相关问题都是开发人员忘记从映射器方法等返回的错误，而我找不到与我的情况有关的错误。

编辑：为了清楚起见，我希望能够这样调用我的函数：

export const fetchSomeObject = (): Promise<SomeResponseType> =>
  fetchJson('/api/some-endpoint', {
    method: 'GET',
    headers: {},
  });

然后：

fetchSomeObject.then((response: SomeResponseType) => {
  [...]
});

Answer 1

尽管您可以始终return调整.then逻辑来解决此问题，但最好还是完全avoid the explicit Promise construction antipattern，完全避开该问题。当Promise中有错误时，您可以在其中throw停止处理程序并使控制流转到catch。

您应该在catch的消费者中使用fetchJson-不要在这里catch，因为那样，当获取失败时，您将返回某种错误的类型-catch时，您会返回一个已解决的承诺，这在这里是不希望的。

如果您想JSON.parse进行响应，请使用.json()方法而不是.text()方法，它将自动完成。

还请注意，当TS可以推断出类型时，就无需显式记录其类型。

export function fetchJson<T>(url: string): Promise<T> {
    return fetch(url)
        .then((response) => {
            if (!response.ok) {
                throw new Error(response.statusText);
            } else {
                return response.json();
            }
        });
}

// Then in the consumer:
fetchJson<someType>('someURL')
    .then((result) => {
        // result is of type someType
    })
    .catch((err) => {
        // handle errors here
    });

Answer 2

如果响应为200 OK，则第一个.then无法解析-尝试将其更改为以下内容：

export function fetchJson<T>(url: string, data: FetchDataTypes): Promise<T> {
    return new Promise((resolve, reject) => {
        fetch(url, {})
            .then((response: Response) => {
                if (!response.ok) {
                    reject(response);
                } else {
                    resolve(response.text() as Promise<string>);
                }
            })
            .then((text: string) => {
                try {
                    resolve(JSON.parse(text) as T);
                } catch (err) {
                    reject(err);
                }
            })
            .catch((err: Promise<void>) => reject(err));
    });
}

使用fetch和TypeScript解码JSON会引发eslint“预期在箭头函数的末尾返回值”错误

2 个答案: