自分へのメモのために投下。
async awaitの簡単な仕組み
async function test(){
で起動。まぁ無名関数でもなんでもいいのかもしれない。とにかくasyncを頭につけたfunctionの波括弧内に普通の独自関数みたいに記述していく。
このasyncの中でのみ、特殊なawaitが使えるようになる。
const update = await Updates.checkForUpdateAsync();
このawaitの本来の使い方は普通の変数として要素を宣言する時に代入値側にawaitを頭につけた代入をするとこのデータがnullであったとしてもエラーを吐かずに待機してくれるものらしい。データが入るまでは応答しない、ということか。そしてデータが入った後でようやく実行するようになる。
同じように代入に限らず処理にも当てることができるらしく、したい処理の前にawaitを付加したらそれが実行が完了するまで待機してくれるようだ。その処理の後に.then(function(){処理内容})を付加すれば、「処理が完了した後にこの処理をする」というものができる。
await Updates.fetchUpdateAsync().then(function(){
このような実装が必要だったのが、reactnative/expoのデータ自動更新の確認作業だった。


expoのデータ更新のために必要な作業
  1. expoのサーバーへ更新確認
  2. 更新を確認したらそれをダウンロード
  3. ダウンロードしたら再起動して適用
expoのデータサーバーへ瞬時にはロードできないがロードできないわけではない。
ロードしてからでないと話は進まない。ダウンロードしてからでないと再起動しても意味が無い。

つまり、この3つの処理は必ず前の処理が完了してからでないとダメ。データの読み込みが完了しなければ意味が無いのだ。
こうして設計されたコードがこちら。
async function test(){
const update = await Updates.checkForUpdateAsync();
if (update.isAvailable) {
ToastAndroid.showWithGravityAndOffset('更新データがあります。ダウンロード、更新が完了するまでお待ちください。',ToastAndroid.LONG,ToastAndroid.BOTTOM,25,50,);
await Updates.fetchUpdateAsync().then(function(){
ToastAndroid.showWithGravityAndOffset('ダウンロードが完了しました。再起動します。',ToastAndroid.LONG,ToastAndroid.BOTTOM,25,50,);
Updates.reload();
});
}
else{
}
}
まず行で順に見ていこう。
asyncのつけたfunctionのtestが今回の自作関数だ。
Updates.checkForUpdateAsyncが、サーバーにアップデート確認する処理。この結果を変数に返すので、update.isAvailableがtrueになれば更新アリ、そうでなければナシなif分岐が作成できる。
Toastはただの告知だから無視して、Updates.fetchUpdateAsync()でデータの取得ができる。その取得にawaitで待機させた後、.thenを噛ませることで「アップデート後の情報を取得したのを確認した後中のfunctionを実行する」ということが可能となる。
で、そのfunctionの中身だが、Updates.reload();だけ。これで中身の再起動がされる。外面的にはアプリがクラッシュして再起動したようにも見えるのでここはちゃんと告知が必要かもしれない。

もし、ここでawaitとthenを使わずにやろうとしたらどうなるのか気になるだろうが、ダウンロードが完了する前に再起動が掛かって無限クラッシュループに陥ってしまった。
処理の指示して終了するのと、処理してから結果が出るのはまた違うようだ。
それと冒頭のawaitをしなければ、if分岐がNullPointExceptionを吐くのは間違いないだろう。
tryしてればよさそうにも一瞬感じるが.....まぁ、それは考え方がそもそも違うのでここでは気にしない方針でいく。

あ、一番重要なことだけど、今回は自作関数なので実行するために記述が必須。どこでもいいので
test();
の記述をお忘れなく。

さて、説明しているサイトも個人的にはかなり難しく感じたので自分が使う最低限な概念をピックアップして紹介してみたがどうだろう、わかりやすかっただろうか??ではまた〜〜。