代码之家 › 专栏 › 技术社区 › OptimusCrime

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

eslint typescript

OptimusCrime · 技术社区 · 4 年前

我有以下代码尝试执行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));
    });
}

我已经看过了文档,我很确定这是因为 .then 回调的返回/无返回不一致。我曾尝试对我的代码进行变异,使其要么有回报,要么没有回报,但我一辈子都不知道如何重写这段代码,使eslint再次快乐起来。

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

然后:

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

2 回复 | 直到 4 年前

CertainPerformance 4 年前

而你却可以随时修好它 return 调整和调整 .then 从逻辑上讲,最好是 avoid the explicit Promise construction antipattern throw 在它内部停止处理程序并使控制流转到 catch .

你应该 消费者 fetchJson 接住 在这里,因为当获取失败时,您将返回错误类型的内容—当您 接住 承诺,这在这里是不可取的。

如果你想 JSON.parse .json() 方法,而不是 .text() 方法,它将自动完成。

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
    });

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前