快捷導(dǎo)航

Node.js?中使用fetch?按JSON格式發(fā)post請(qǐng)求的問(wèn)題解析

更新時(shí)間：2023年04月01日 14:19:06 作者：loseran

最近在測(cè)試一個(gè)api，可以用curl命令直接訪問(wèn)，指定header相關(guān)配置，request?body(JSON)，成功后返回一個(gè)JSON，這篇文章主要介紹了Node.js?中使用fetch?按JSON格式發(fā)post請(qǐng)求,需要的朋友可以參考下

Node.js 中使用fetch 按JSON格式發(fā)post請(qǐng)求

最近在測(cè)試一個(gè)api，可以用curl命令直接訪問(wèn)，指定header相關(guān)配置，request body(JSON)，成功后返回一個(gè)JSON。

原本想搞個(gè)靜態(tài)頁(yè)面html，在script標(biāo)簽里用fetch做個(gè)簡(jiǎn)單的demo的，結(jié)果就遇到跨域問(wèn)題。遂使用后端請(qǐng)求，就想到了Nodejs。

既然有現(xiàn)成的工具，那就使用唄。

環(huán)境node --version: 18.15.0

1.全局安裝express-generator:

npm i express-generator -g

2.生成一個(gè)測(cè)試項(xiàng)目：

express nodepost

3. 安裝依賴

cd nodepostnpm install

4.試運(yùn)行(沒(méi)有意外的話可以在瀏覽器輸入 localhost:3000，看到Express 歡迎頁(yè))

npm start

5. VSCODE編輯

code .

6.修改routers/index.js, 增加以下代碼段，注意按你實(shí)際配置來(lái)(url, requestData, authkey...)

router.get('/json', (req, res, next) => {
  let success = true;
  const data = {
    k: 'your real data'
  };
  fetch('https://example.com/api/g', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
      'Authorization': 'your real auth key if neccessory, otherwise you could not config this item',
 
    },
  }
  ).then((res) => res.json())
  .then((json) => console.log(json))
  .catch(err => {
    success = false;
    console.log('err:', err);
  })
  res.json({
    success
  })
});

7.訪問(wèn) localhost:3000/json, 不出問(wèn)題的話能在后端控制臺(tái)查看請(qǐng)求結(jié)果

PLUS:

選擇新版本的Node，不能低于17.5.0，否則不能直接使用fecth，在文末有補(bǔ)充說(shuō)明。

低版本用node-fetch庫(kù)或者原生的http模塊, node-fetch我自己導(dǎo)入一直有問(wèn)題，原生http模塊要寫(xiě)不少東西，故不采用。

補(bǔ)充：寫(xiě) Node.js，終于能用 Fetch 發(fā)請(qǐng)求了

Node.js 支持 Fetch API 啦！

在以前，使用原生的 Node.js API 發(fā)送一個(gè) HTTP 請(qǐng)求非常麻煩，你可能要寫(xiě)下面的代碼：

const https = require('https')
const options = {
  hostname: 'nodejs.cn',
  port: 443,
  path: '/todos',
  method: 'GET'
}
 
const req = https.request(options, res => {
  console.log(`狀態(tài)碼: ${res.statusCode}`)
 
  res.on('data', d => {
    process.stdout.write(d)
  })
})
 
req.on('error', error => {
  console.error(error)
})
 
req.end()

所以通常，我們可能會(huì)引入一些第三方的 NPM 包，比如 axios、needle、node-fetch、request 這些。

在最新的 Node.js v17.5 版本中，增加了對(duì) Fetch API 的支持，所以無(wú)需借助這些第三方 HTTP 請(qǐng)求庫(kù)啦。

Fetch API 可能大家都比較熟悉了，他是當(dāng)前最流行的跨平臺(tái) HTTP Client API ，目前已經(jīng)可以在瀏覽器和 Web/Service Workers 中運(yùn)行，當(dāng)前 Web 環(huán)境里用到最多的請(qǐng)求方式應(yīng)該就是它了。

Node.js 中的Fetch API 基于 Undici 實(shí)現(xiàn)，它提供了一個(gè) WHATWG 標(biāo)準(zhǔn)接口來(lái)獲取資源，并且也是基于 Promise 的，使用方式基本和瀏覽器中一致，包括四個(gè)核心模塊：

fetch() - 用于發(fā)起請(qǐng)求的函數(shù)
Headers 類 - 用于處理請(qǐng)求頭和響應(yīng)頭
Request 類 - 表示傳入請(qǐng)求的實(shí)例
Response 類 - 表示傳入響應(yīng)的實(shí)例

const res = await fetch('https://www.conardli.top');
const json = await res.json();
console.log(json);

其實(shí)這并不是簡(jiǎn)單的支持了一個(gè)新的原生 HTTP 請(qǐng)求庫(kù)那么簡(jiǎn)單，這意味著很多之前在 Web 中用到 Fetch 的 NPM 包也可以在 Node.js 里以同樣的方式工作了，這些包同樣可以實(shí)現(xiàn)跨平臺(tái)兼容了～

在 Node.js v17.5 中，它還是個(gè)實(shí)驗(yàn)特性，現(xiàn)在想要試用的話可以通過(guò) node --experimental-fetch flag 開(kāi)啟。

Fetch 的優(yōu)勢(shì)在于它是原生支持，并且可以兼容多平臺(tái)，其他的請(qǐng)求庫(kù)估計(jì)都要慢慢的靠邊站了～對(duì)此你有啥看法？

到此這篇關(guān)于Node.js 中使用fetch 按JSON格式發(fā)post請(qǐng)求的文章就介紹到這了,更多相關(guān)Node.js fetch post請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: