さまざまな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/jsonとauthorizationAPIダッシュボードから割り当てられたベアラートークンを使用してリクエストを認証するためのヘッダー。

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ビギナーズハンドブック

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

XHR

Fetch API

ノードHTTPSモジュール

ザ・request図書館

Axios

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

ザ・`request`図書館