web-dev-qa-db-ja.com

Async / Awaitを使用してAPIフェッチを「POST」にする適切な方法

私は、APIにリクエストする必要があるプロジェクトに取り組んでいます。 Async/AwaitでPOSTリクエストを作成するための適切な形式は何ですか？

例として、すべてのデバイスのリストを取得するためのフェッチを次に示します。このリクエストをPOSTに変更して新しいデバイスを作成するにはどうすればよいでしょうか？データ本体にヘッダーを追加する必要があることを理解しています。

getDevices = async () => {
  const location = window.location.hostname;
  const response = await fetch(
    `http://${location}:9000/api/sensors/`
  );
  const data = await response.json();
  if (response.status !== 200) throw Error(data.message);
  return data;
};
javascriptreactjspostfetch
9
Nik Ackermann

実際、コードは次のように改善できます。

投稿を行うには、フェッチ呼び出しの設定にメソッドを追加するだけです。

getDevices = async () => {
    const location = window.location.hostname;
    const settings = {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
    };
    try {
        const fetchResponse = await fetch(`http://${location}:9000/api/sensors/`, settings);
        const data = await fetchResponse.json();
        return data;
    } catch (e) {
        return e;
    }    

}
14
Prince Hernandez

設定の例を次に示します。

try {
    const config = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    }
    const response = await fetch(url, config)
    //const json = await response.json()
    if (response.ok) {
        //return json
        return response
    } else {
        //
    }
} catch (error) {
        //
}
9
Ali Ankarali

async/awaitおよびthenは次の例です。

const addDevice = async (device) => {
  const { hostname: location } = window.location;
  const settings = {
    method: 'POST',
    body: JSON.stringify(device),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }
  }

  const response = await fetch(`http://${location}:9000/api/sensors/`, settings);
  if (!response.ok) throw Error(response.message);

  try {
    const data = await response.json();
    return data;
  } catch (err) {
    throw err;
  }
};
0
TomasVeras