Cùng một lệnh gọi API POST trong các thư viện JavaScript khác nhau

Tôi đang thử nghiệm một API bằng cách sử dụngMất ngủ, một ứng dụng rất thú vị cho phép bạn thực hiện các yêu cầu HTTP tới các dịch vụ API REST hoặc API GraphQL.

Họ có một nút đẹp tạo mã để sao chép một yêu cầu API từ ứng dụng, nơi bạn thiết kế tất cả dữ liệu yêu cầu của mình một cách trực quan.

Nội bộ nó sử dụnghttps://github.com/Kong/httpsnippetlà trình tạo đoạn mã HTTP Request cho nhiều ngôn ngữ và thư viện, được viết bằng JavaScript. Một dự án rất thú vị.

Dù sao, việc xuất có một số đoạn mã. Tôi muốn hiển thị cùng một lệnh gọi API trong các thư viện khác nhau.

Đầu tiên, đây là mô tả cuộc gọi API. Tôi thực hiện một yêu cầu ĐĂNG tớiapi.randomservice.comtrang web (đó là một URL ngẫu nhiên mà tôi vừa nghĩ ra) đến/dogđiểm cuối.

Tới điểm cuối này, tôi gửi một đối tượng có 2 thuộc tính:

{
  name: 'Roger',
  age: 8
}

được mã hóa dưới dạng JSON.

Tôi cũng vượt qua mộtcontent-typeđể đặt nội dung làapplication/jsonvà mộtauthorizationtiêu đề để xác thực yêu cầu của tôi bằng mã thông báo Bearer mà tôi đã được chỉ định thông qua bảng điều khiển API.

XHR

Ví dụ mã đầu tiên làXHR, chúng tôi có thể sử dụng nguyên bản trong trình duyệt và trong Node.js bằng cách sử dụnghttps://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)

API tìm nạp

Sau đó, chúng tôi có cùng một mã bằng cách sử dụngAPI tìm nạp, một API khác có sẵn trong trình duyệt và trong Node.js bằng cách sử dụnghttps://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)
  })

Mô-đun HTTPS của nút

Tiếp theo, bản địahttpsMô-đun Node.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()

Cácrequestthư viện

Ở đây cũng tương tự bằng cách sử dụngrequestThư viện nút:

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

Đây là cách sử dụng tương tựAxios, một thư viện phổ biến cho cả Node và trình duyệt:

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) })

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: