Promiseに関する質問かと思いますので、本質的でない remarkjs(?) などの処理を除外して考えると以下の様になるかと思います。
type Article = {
name: string
sha: string
size: number
url: string
html_url: string
git_url: string
download_url: string
type: string
};
type Content = {
name: string
path: string
sha: string
size: number
url: string
html_url: string
git_url: string
download_url: string
type: string
content: string
encoding: string
};
let data: ReadonlyArray<Record<string, unknown>> = [];
const setData = (values: ReadonlyArray<Record<string, unknown>>) => { data = values; }
const getArticles = async (): Promise<ReadonlyArray<Article>> =>
fetch("https://api.github.com/repos/wimpykid719/zenn-content/contents/articles/")
.then(res => res.json())
.catch(err => {
console.error(err);
return [];
});
const getContents = async (zennArticles: ReadonlyArray<Article>): Promise<ReadonlyArray<Content>> => {
if (zennArticles.length > 0) {
return Promise.all(
zennArticles
.map(async (article: Article) => {
return fetch(`https://api.github.com/repos/wimpykid719/zenn-content/contents/articles/${article.name}`)
.then(res => res.json())
})).catch(err => {
console.error(err);
return [];
});
} else {
return [];
}
}
const getData = async (): Promise<ReadonlyArray<Record<string, unknown>>> => {
const articles = await getArticles();
const contents = await getContents(articles);
// FIXME: remarkjs で content を HTML に変換したりなどする。
// 関数などを定義して呼び出してもよい。
// const data = await parseContents(contents);
// return data;
console.log(contents);
return contents;
}
getData().then(setData);
上記コードのTypeScript Playgroundで動作を確認してみてください。
※ 極力コードが短くなるように一部変更しています
※ Record<string, unknown>
は {}
と同義です。(typescript-eslint#ban-types
)
※ ReadonlyArray<>
は、この型にしておくと、その配列を直接変更するようなメソッド呼び出しができなくなります。
質問に書かれているコードについて
- catchで値を返すとそれ以降の
then()
でその値が返ります
- 今回は、error loggingだけしておいて、とりあえず空配列などを返しておけばよいと思います
async
関数では必ず「値」か「Promise」を返しましょう
- 値を返した場合、
Promise.resolve()
でその値を返した扱いになります
- 「
Promise.all()
が返すPromise」や「zennArticles
がfalsyの場合」などで一切returnをしていないので、このasync関数は (zennArticles: Array<Article>) => Promise<void>
になっています
- なので、このasync関数の
then()
の戻り値は必ず undefined
になるかと思います
- 慣れないうちは、async関数の戻り値の型を書いておくことをおすすめします
- その型の戻り値を返していない場合に、コンパイルが通らなくなります
- 回答のように
async
関数を単一機能ごとに分けて定義すれば、動作確認や問題の切り分けが楽になりそうな気がします
Promise.all()
は1つでも失敗すると、全体が失敗します
- 個別のエラー処理が不要であれば、
Promise.all()
の後でcatch()
すればいいかと思います
Promise.all([
Promise.resolve(0),
Promise.resolve(1),
Promise.reject(new Error("Error in 2")),
Promise.resolve(3),
Promise.resolve(4)
])
.then(numbers => { console.log(numbers); })
.catch(e => {
console.error(e);
return [];
});
余談
Promise.all()
でエラーが起きたものだけ除外したい場合、各Promise
でArrayを返して型をT[][]
にしておき、取得するときにArray.prototype.flat()
でT[]
に変換してしまう方法などもあります。
const promises = [0, 1, 2, 3, 4, 5, 6].map(n => {
if (n % 2 === 0) {
// 値を配列に包んで返す
return Promise.resolve([n]);
} else {
// エラーが起きたものは空配列を返すようにしておく
// -> 2次元配列を .flat() した時に消える
return Promise.reject(new Error(`Error in ${n}`))
.catch(e => {
console.error(e);
return [];
});
}
});
Promise.all(promises)
.then(numbersNestedArray => numbersNestedArray.flat())
.then(numbers => { console.log(numbers); });