对象的联合类型包含用 Promise 包装的布尔文本类型

Question

我想写对象的联合类型包含用 Promise 包装的布尔文字类型作为 XHR 响应。但是我不能放置适当的类型。

type MyResponseSuccess = { data: any, error: false };
type MyResponseFailure = { message: string, error: true };
type MyResponse = MyResponseSuccess | MyResponseFailure;
function call(): Promise<MyResponse> {
return fetch('ENDPOINT')
.then(res => res.json())
.then(payload => ({ data: payload, error: false }))
.catch(err => ({ error: true, message: err.toString() }));
}

此代码会导致以下错误。为什么。。。？或者，如果有人知道此问题的解决方法，请告诉我。

键入 'Promise<{ data： any; error： boolean; } |{ 错误：布尔值; 消息：任何;}>"不能分配给类型"承诺"。 键入 '{ data： any; error： boolean; } |{ 错误：布尔值;消息：任何;}'不能分配给键入"我的响应"。 键入"{ data： any; error： boolean; }" 不能分配给键入 'MyResponse'。 键入"{ data： any; error： boolean; }" 不能分配给类型"MyResponseFailure"。 类型"{ data： any; error： boolean; }" 中缺少属性"message"。

Answer 1

解决方案是我们必须告诉 Typescript，即响应的返回类型。在这种情况下，我们可以使用as。

type MyResponseSuccess = { data: any, error: false };
type MyResponseFailure = { message: string, error: true };
type MyResponse = MyResponseSuccess | MyResponseFailure;
function call(): Promise<MyResponse> {
return fetch('ENDPOINT')
.then(res => res.json())
.then(payload => ({ data: payload, error: false } as MyResponseSuccess))
.catch(err => ({ error: true, message: err.toString() } as MyResponseFailure));
}

Answer 2

根据错误，你可以试试这个：

function call(): Promise<MyResponse> {
return fetch('ENDPOINT')
.then(res => {
if (!res.ok) {
throw new Error(res.statusText)
}
return res.json();
})
.then(payload => {
return { data: payload, error: false }
})
.catch(err => {
return { message: err.toString() , error: true };
})
}
type MyResponseSuccess = { data: any, error: boolean };
type MyResponseFailure = { message: string, error: boolean };
type MyResponse = MyResponseSuccess | MyResponseFailure;