各种JavaScript库中的相同POST API调用

我正在使用测试API失眠,这是一个非常酷的应用程序,它使您可以执行对REST API或GraphQL API服务的HTTP请求。

他们有一个漂亮的按钮,可以生成代码以复制来自应用程序的API请求,您可以在其中直观地设计所有请求数据。

在内部使用https://github.com/Kong/httpsnippet这是使用JavaScript编写的多种语言和库的HTTP请求代码段生成器。一个非常酷的项目。

无论如何,导出有几个代码段。我想在不同的库中显示相同的API调用。

首先,这里是API调用说明。我向POST请求api.randomservice.com网站(这是我刚想出的随机网址)/dog端点。

我向该端点发送一个具有2个属性的对象:

{
  name: 'Roger',
  age: 8
}

编码为JSON。

我也通过了content-type将内容设置为application/jsonauthorization标头,以使用通过API仪表板分配的Bearer令牌对我的请求进行身份验证。

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)

提取API

然后,我们使用提取API,这是浏览器和Node.js中本机可用的另一个API,使用https://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,这是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) })

免费下载我的JavaScript初学者手册


更多js教程: