JavaScript での Promise と Async/Await を簡単に学ぶ-jsチュートリアル-php.cn

例 2: 推測ゲーム

示例3：从Web API中获取国家信息

示例4：从Web API中获取一个国家的周边国家列表

总结

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript での Promise と Async/Await を簡単に学ぶ

青灯夜游

Jan 30, 2021 am 10:01 AM

javascript promise

JavaScript での Promise と Async/Await を簡単に学ぶ

一般に、開発ではネットワーク API 操作のクエリに時間がかかることが多く、応答を得るまでに時間がかかる場合があります。そのため、プログラムが要求しても応答しなくなるという事態を避けるために、非同期プログラミングは開発者の基本スキルとなっています。

JavaScript で非同期操作を扱うとき、通常、「Promise」という概念を耳にします。しかし、その仕組みや使用方法を理解することは抽象的で理解しにくい場合があります。

関連する推奨事項: "JavaScript ビデオチュートリアル "

そこで、この記事では、その概念と使用法をより早く理解できるように、実践的な方法を使用します。従来のドライなチュートリアルでは、次の 4 つの例から始めます。

例 1: 誕生日を使った約束の基本の説明
例 2: 数字当てゲーム
例 3: Web API から国情報を取得する
例 4: Web API からある国の近隣諸国のリストを取得

#例 1: 誕生日を使用して説明するPromise の基本

まず、Promise の基本的な形を見てみましょう。

Promise が実行されるとき、保留中 (実行中)、履行済み (成功)、および拒否済み (失敗) の 3 つの状態があります。

new Promise(function(resolve, reject) {
    if (/* 异步操作成功 */) {
        resolve(value); //将Promise的状态由padding改为fulfilled
    } else {
        reject(error); //将Promise的状态由padding改为rejected
    }
})
实现时有三个原型方法then、catch、finally
promise
.then((result) => {
    //promise被接收或拒绝继续执行的情况
})
.catch((error) => {
    //promise被拒绝的情况
})
.finally (() => {
    //promise完成时，无论如何都会执行的情况
})

ログイン後にコピー

基本的なフォームの紹介は完了したので、次の例を見てみましょう。

ユーザーストーリー: 友人のカヨが、2 週間後の誕生日パーティーにケーキを作ってくれると約束してくれました。

すべてが順調に進み、加代が病気にならなければ、ある程度の量のケーキを手に入れることができますが、もし加代が病気になったら、ケーキはなくなります。でも、ケーキがあってもなくても、誕生日パーティーは開きます。

それでは、この例では、上記の背景ストーリーを JS コードに変換し、まず Promise を返す関数を作成しましょう。

const onMyBirthday = (isKayoSick) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!isKayoSick) {
        resolve(2);
      } else {
        reject(new Error("I am sad"));
      }
    }, 2000);
  });
};

ログイン後にコピー

JavaScript では、new Promise() を使用して新しい Promise を作成できます。この Promise は、パラメーター (resolve、reject)=>{} を持つ関数を受け取ります。

この関数では、resolve と request がデフォルトで提供されるコールバック関数です。上記のコードを詳しく見てみましょう。

onMyBirthday 関数を 2000 ミリ秒後に実行したとき。

onMyBirthday() は Promise を返すため、then、catch、finally メソッドにアクセスできます。また、解決と拒否に渡されたパラメータに早い段階でアクセスし、解決と拒否に渡されたパラメータを使用してキャッチすることもできます。

次のコードで概念を理解しましょう

Kayo が病気でない場合

onMyBirthday(false)
  .then((result) => {
    console.log(`I have ${result} cakes`); // 控制台打印“I have 2 cakes” 
  })
  .catch((error) => {
    console.log(error); // 不执行
  })
  .finally(() => {
    console.log("Party"); // 控制台打印“Party”
  });

ログイン後にコピー

Kayo が病気である場合

onMyBirthday(true)
  .then((result) => {
    console.log(`I have ${result} cakes`); // 不执行 
  })
  .catch((error) => {
    console.log(error); // 控制台打印“我很难过”
  })
  .finally(() => {
    console.log("Party"); // 控制台打印“Party”
  });

ログイン後にコピー

Promise は理解できると思いますこの例では、基本的な概念について説明します。

例 2 から始めましょう

例 2: 推測ゲーム

基本要件:

上記の要件では、まず enterNumber 関数を作成し、Promise を返します。

const enterNumber = () => {
  return new Promise((resolve, reject) => {
    // 从这开始编码
  });
};

ログイン後にコピー

最初に行うことは、ユーザーに番号を尋ね、ランダムに選択することです。 1 ～ 6 の数値:

const enterNumber = () => {
  return new Promise((resolve, reject) => {
    const userNumber = Number(window.prompt("Enter a number (1 - 6):")); // 向用户索要一个数字
    const randomNumber = Math.floor(Math.random() * 6 + 1); // 选择一个从1到6的随机数
  });
};

ログイン後にコピー

ユーザーが数値ではない値を入力したとき。この場合、reject 関数を呼び出してエラーをスローします:

const enterNumber = () => {
  return new Promise((resolve, reject) => {
    const userNumber = Number(window.prompt("Enter a number (1 - 6):")); // 向用户索要一个数字
    const randomNumber = Math.floor(Math.random() * 6 + 1); //选择一个从1到6的随机数

    if (isNaN(userNumber)) {
      reject(new Error("Wrong Input Type")); // 当用户输入的值非数字，抛出异常并调用reject函数
    }
  });
};

ログイン後にコピー

以下では、userNumber が RanomNumber と等しいかどうかを確認する必要があります。等しい場合は、ユーザーに 2 ポイントを与え、その後、関数を解決してオブジェクト { ポイント: 2、randomNumber } オブジェクトを渡します。

userNumber とrandomNumber の差が 1 の場合、ユーザーに 1 ポイントを与えます。それ以外の場合は、ユーザーに 0 ポイントを与えます。

return new Promise((resolve, reject) => {
  const userNumber = Number(window.prompt("Enter a number (1 - 6):")); // 向用户索要一个数字
  const randomNumber = Math.floor(Math.random() * 6 + 1); // 选择一个从1到6的随机数

  if (isNaN(userNumber)) {
    reject(new Error("Wrong Input Type")); // 当用户输入的值非数字，抛出异常并调用reject函数
  }

  if (userNumber === randomNumber) {
    // 如果相等，我们给用户2分
    resolve({
      points: 2,
      randomNumber,
    });
  } else if (
    userNumber === randomNumber - 1 ||
    userNumber === randomNumber + 1
  ) {
    // 如果userNumber与randomNumber相差1，那么我们给用户1分
    resolve({
      points: 1,
      randomNumber,
    });
  } else {
    // 否则用户得0分
    resolve({
      points: 0,
      randomNumber,
    });
  }
});

ログイン後にコピー

次に、ユーザーにゲームを続行するかどうかを尋ねる別の関数を作成しましょう:

const continueGame = () => {
  return new Promise((resolve) => {
    if (window.confirm("Do you want to continue?")) { // 向用户询问是否要继续游戏
      resolve(true);
    } else {
      resolve(false);
    }
  });
};

ログイン後にコピー

ゲームを強制的に終了させないために、作成した Promise では次の関数を使用しません。拒否コールバック。

以下では、推測ロジックを処理する関数を作成します。

const handleGuess = () => {
  enterNumber() // 返回一个Promise对象
    .then((result) => {
      alert(`Dice: ${result.randomNumber}: you got ${result.points} points`); // 当resolve运行时，我们得到用户得分和随机数 
      
      // 向用户询问是否要继续游戏
      continueGame().then((result) => {
        if (result) {
          handleGuess(); // If yes, 游戏继续
        } else {
          alert("Game ends"); // If no, 弹出游戏结束框
        }
      });
    })
    .catch((error) => alert(error));
};

handleGuess(); // 执行handleGuess 函数

ログイン後にコピー

在这当我们调用handleGuess函数时，enterNumber()返回一个Promise对象。

如果Promise状态为resolved，我们就调用then方法，向用户告知竞猜结果与得分，并向用户询问是否要继续游戏。

如果Promise状态为rejected，我们将显示一条用户输入错误的信息。

不过，这样的代码虽然能解决问题，但读起来还是有点困难。让我们后面将使用async/await 对hanldeGuess进行重构。

网上对于 async/await 的解释已经很多了，在这我想用一个简单概括的说法来解释：async/await就是可以把复杂难懂的异步代码变成类同步语法的语法糖。

下面开始看重构后代码吧：

const handleGuess = async () => {
  try {
    const result = await enterNumber(); // 代替then方法，我们只需将await放在promise前，就可以直接获得结果

    alert(`Dice: ${result.randomNumber}: you got ${result.points} points`);

    const isContinuing = await continueGame();

    if (isContinuing) {
      handleGuess();
    } else {
      alert("Game ends");
    }
  } catch (error) { // catch 方法可以由try, catch函数来替代
    alert(error);
  }
};

ログイン後にコピー

通过在函数前使用async关键字，我们创建了一个异步函数，在函数内的使用方法较之前有如下不同：

和then函数不同，我们只需将await关键字放在Promise前，就可以直接获得结果。
我们可以使用try, catch语法来代替promise中的catch方法。

下面是我们重构后的完整代码，供参考：　　

const enterNumber = () => {
  return new Promise((resolve, reject) => {
    const userNumber = Number(window.prompt("Enter a number (1 - 6):")); // 向用户索要一个数字
    const randomNumber = Math.floor(Math.random() * 6 + 1); // 系统随机选取一个1-6的数字

    if (isNaN(userNumber)) {
      reject(new Error("Wrong Input Type")); // 如果用户输入非数字抛出错误
    }

    if (userNumber === randomNumber) { // 如果用户猜数字正确，给用户2分
      resolve({
        points: 2,
        randomNumber,
      });
    } else if (
      userNumber === randomNumber - 1 ||
      userNumber === randomNumber + 1
    ) { // 如果userNumber与randomNumber相差1，那么我们给用户1分
      resolve({
        points: 1,
        randomNumber,
      });
    } else { // 不正确，得0分
      resolve({
        points: 0,
        randomNumber,
      });
    }
  });
};

const continueGame = () => {
  return new Promise((resolve) => {
    if (window.confirm("Do you want to continue?")) { // 向用户询问是否要继续游戏
      resolve(true);
    } else {
      resolve(false);
    }
  });
};

const handleGuess = async () => {
  try {
    const result = await enterNumber(); // await替代了then函数

    alert(`Dice: ${result.randomNumber}: you got ${result.points} points`);

    const isContinuing = await continueGame();

    if (isContinuing) {
      handleGuess();
    } else {
      alert("Game ends");
    }
  } catch (error) { // catch 方法可以由try, catch函数来替代
    alert(error);
  }
};

handleGuess(); // 执行handleGuess 函数

ログイン後にコピー

我们已经完成了第二个示例，接下来让我们开始看看第三个示例。

示例3：从Web API中获取国家信息

一般当从API中获取数据时，开发人员会精彩使用Promises。如果在新窗口打开https://restcountries.eu/rest/v2/alpha/cn，你会看到JSON格式的国家数据。

通过使用Fetch API，我们可以很轻松的获得数据，以下是代码：

const fetchData = async () => {
  const res = await fetch("https://restcountries.eu/rest/v2/alpha/cn"); // fetch() returns a promise, so we need to wait for it

  const country = await res.json(); // res is now only an HTTP response, so we need to call res.json()

  console.log(country); // China&#39;s data will be logged to the dev console
};

fetchData();

ログイン後にコピー

现在我们获得了所需的国家/地区数据，让我们转到最后一项任务。

示例4：从Web API中获取一个国家的周边国家列表

下面的fetchCountry函数从示例3中的api获得国家信息，其中的参数alpha3Code 是代指该国家的国家代码，以下是代码

// Task 4: 获得中国周边的邻国信息
const fetchCountry = async (alpha3Code) => {
  try {
    const res = await fetch(
      `https://restcountries.eu/rest/v2/alpha/${alpha3Code}`
    );

    const data = await res.json();

    return data;
  } catch (error) {
    console.log(error);
  }
};

ログイン後にコピー

下面让我们创建一个fetchCountryAndNeighbors函数，通过传递cn作为alpha3code来获取中国的信息。

const fetchCountryAndNeighbors = async () => {
  const china= await fetchCountry("cn");

  console.log(china);
};

fetchCountryAndNeighbors();

ログイン後にコピー

在控制台中，我们看看对象内容：　　

在对象中，有一个border属性，它是中国周边邻国的alpha3codes列表。

现在，如果我们尝试通过以下方式获取邻国信息。

const neighbors = 
    china.borders.map((border) => fetchCountry(border));

ログイン後にコピー

neighbors是一个Promise对象的数组。

当处理一个数组的Promise时，我们需要使用Promise.all。

const fetchCountryAndNeigbors = async () => {
  const china = await fetchCountry("cn");

  const neighbors = await Promise.all(
    china.borders.map((border) => fetchCountry(border))
  );

  console.log(neighbors);
};

fetchCountryAndNeigbors();

ログイン後にコピー

在控制台中，我们应该能够看到国家/地区对象列表。

以下是示例4的所有代码，供您参考：

const fetchCountry = async (alpha3Code) => {
  try {
    const res = await fetch(
      `https://restcountries.eu/rest/v2/alpha/${alpha3Code}`
    );
    const data = await res.json();
    return data;
  } catch (error) {
    console.log(error);
  }
};

const fetchCountryAndNeigbors = async () => {
  const china = await fetchCountry("cn");
  const neighbors = await Promise.all(
    china.borders.map((border) => fetchCountry(border))
  );
  console.log(neighbors);
};

fetchCountryAndNeigbors();

ログイン後にコピー