我使用了一個很酷的應用程序Insomnia來測試API,它允許您對REST API或GraphQL API服務進行HTTP請求。
該應用程序具有一個很好的按鈕,可以生成代碼以從應用程序複製API請求,您可以在其中以可視化方式設計所有請求數據。
在內部,他們使用了httpsnippet,這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。
無論如何,導出的代碼片段有幾個,我想展示不同庫中相同的API調用。
首先,這是API調用的描述。我向 api.randomservice.com
網站發送一個POST請求(這是我隨便想出的一個隨機URL)到 /dog
端點。
我向該端點發送一個帶有2個屬性的對象:
{
name: 'Roger',
age: 8
}
作為JSON編碼。
我還傳遞了一個 content-type
以將內容設置為 application/json
,並且還傳遞了一個 authorization
標頭,以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。
XHR
第一個代碼示例是使用XHR(可在瀏覽器中原生支持)和在Node.js中使用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
然後,我們使用Fetch API進行相同的代碼片段,這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API:
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模塊:
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
庫的相同代碼:
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和瀏覽器中都很流行的庫:
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);
});