p5.js Web Editor上で axios を使った HTTPリクエスト（JSONPlaceholder から GET で情報取得）

使い道があるかは分からないですが、axios を使った p5.js Web Editor からの HTTPリクエスト（GET）を行う話です。

リクエストを送る先には JSONPlaceholder を用います。

p5.js Web Editor上で axios を使う

ライブラリの読み込み

axios の公式ドキュメントのイントロのページに書かれている CDN上のライブラリを、p5.js Web Editor の index.html で読み込みます。

どちらでも OK です。

リクエスト先の URL

冒頭で書いたとおり、JSONPlaceholder に対して　HTTPリクエストを送って、適当な情報を取得する形にします。
JSONPlaceholder のガイドの最初のほうに書いてある、以下の URL を使うことにします。
https://jsonplaceholder.typicode.com/posts/1

ちなみに、ブラウザでアクセスすると、以下の JSON が得られるのが確認できます。

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

axios による GETリクエストの処理

axios の公式ページの Example に書かれた、以下の部分の処理を用います。

JavaScriptのプログラムを書く

あとは、p5.js Web Editor上の sketch.js を編集します。
キーを押したら HTTPリクエストを実行する、という形にしてみました。

const url = "https://jsonplaceholder.typicode.com/posts/1";

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

async function keyPressed() {
  if (key === "g") {
    try {
      const response = await axios.get(url);
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  }
}

await を使っているので、それが含まれる keyPressed() の部分は async function にしてください。

プログラムを実行し、gキーを押すと、以下の結果を得られます。

無事に JSON を取得できました。