/

在不同的JavaScript庫中進行相同的POST API調用

在不同的JavaScript庫中進行相同的POST API調用

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。

該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。

在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。

無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。

首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。

我向該端點發送一個帶有2個屬性的對象：

1
2
3
4
{
  name: 'Roger',
  age: 8
}

作為JSON編碼。

我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。

XHR

第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fetch('https://api.randomservice.com/dog', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: JSON.stringify({
    name: 'Roger',
    age: 8
  })
})
.then(response => {
  console.log(response);
})
.catch(err => {
  console.log(err);
});

Node HTTPS模塊

接下來是原生的 https Node.js模塊：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const https = 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 = https.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庫的相同代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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庫的相同代碼，Axios是一個在Node和瀏覽器中都很流行的庫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
});

tags: [“JavaScript”, “API”, “XHR”, “Fetch API”, “Node.js”, “HTTPS module”, “request library”, “Axios”]