さまざまなJavaScriptライブラリでの同じPOSTAPI呼び出し

私はを使用してAPIをテストしていました不眠症、RESTAPIまたはGraphQLAPIサービスへのHTTPリクエストを実行できる非常に優れたアプリケーション。

アプリからAPIリクエストを複製するコードを生成する優れたボタンがあり、すべてのリクエストデータを視覚的にデザインします。

内部的には使用しますhttps://github.com/Kong/httpsnippetこれは、JavaScriptで記述された、多くの言語とライブラリ用のHTTPリクエストスニペットジェネレータです。とてもクールなプロジェクト。

とにかく、エクスポートにはいくつかのコードスニペットが含まれていました。異なるライブラリで同じAPI呼び出しを表示したいと思います。

まず、API呼び出しの説明です。にPOSTリクエストを送信しますapi.randomservice.comウェブサイト(私が思いついたランダムなURLです)/dog終点。

このエンドポイントに、2つのプロパティを持つオブジェクトを送信します。

{
  name: 'Roger',
  age: 8
}

JSONとしてエンコードされます。

私も合格しますcontent-typeコンテンツを次のように設定しますapplication/jsonauthorizationAPIダッシュボードから割り当てられたベアラートークンを使用してリクエストを認証するためのヘッダー。

XHR

最初のコード例はXHR、これはブラウザでネイティブに使用でき、Node.jsではhttps://www.npmjs.com/package/xmlhttprequest

const data = JSON.stringify({
  name: 'Roger',
  age: 8
})

const xhr = new XMLHttpRequest() xhr.withCredentials = true

xhr.addEventListener(‘readystatechange’, function() { if (this.readyState === this.DONE) { console.log(this.responseText) } })

xhr.open(‘POST’, https://api.randomservice.com/dog) xhr.setRequestHeader(‘content-type’, ‘application/json’) xhr.setRequestHeader(‘authorization’, ‘Bearer 123abc456def’)

xhr.send(data)

Fetch API

次に、を使用して同じコードがありますフェッチAPI、ブラウザとNode.jsでネイティブに利用可能な別のAPIhttps://www.npmjs.com/package/node-fetch

fetch('https://api.randomservice.com/dog', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: {
    name: 'Roger',
    age: 8
  }
})
  .then(response => {
    console.log(response)
  })
  .catch(err => {
    console.log(err)
  })

ノードHTTPSモジュール

次は、ネイティブhttpsNode.jsモジュール:

const http = require('https')

const options = { method: ‘POST’, hostname: api.randomservice.com, port: null, path: ‘/dog’, headers: { ‘content-type’: ‘application/json’, authorization: ‘Bearer 123abc456def’, ‘content-length’: ‘32’ } }

const req = http.request(options, res => { const chunks = []

res.on(‘data’, chunk => { chunks.push(chunk) })

res.on(‘end’, () => { const body = Buffer.concat(chunks) console.log(body.toString()) }) })

req.write(JSON.stringify({ name: ‘Roger’, age: 8 })) req.end()

ザ・request図書館

これは同じですrequestノードライブラリ:

const request = require('request')

const options = { method: ‘POST’, url: https://api.randomservice.com/dog, headers: { ‘content-type’: ‘application/json’, authorization: ‘Bearer 123abc456def’ }, body: { name: ‘Roger’, age: 8 }, json: true }

request(options, (error, response, body) => { if (error) throw new Error(error)

console.log(body) })

Axios

これは同じ使用法ですAxios、ノードとブラウザの両方で人気のあるライブラリ:

const axios = require('axios')

axios.post(https://api.randomservice.com/dog, { name: ‘Roger’, age: 8 }, { headers: { ‘content-type’: ‘application/json’, authorization: ‘Bearer 123abc456def’ } ) .then((res) => { console.log(res.data) }) .catch((error) => { console.error(error) })

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: