Node.js?中使用fetch?按JSON格式發(fā)post請求的問題解析
Node.js 中使用fetch 按JSON格式發(fā)post請求
最近在測試一個api,可以用curl命令直接訪問,指定header相關(guān)配置,request body(JSON),成功后返回一個JSON。
原本想搞個靜態(tài)頁面html,在script標(biāo)簽里用fetch做個簡單的demo的,結(jié)果就遇到跨域問題。遂使用后端請求,就想到了Nodejs。
既然有現(xiàn)成的工具,那就使用唄。
環(huán)境node --version: 18.15.0
1.全局安裝express-generator:
npm i express-generator -g
2.生成一個測試項目:
express nodepost
3. 安裝依賴
cd nodepostnpm install
4.試運行(沒有意外的話可以在瀏覽器輸入 localhost:3000,看到Express 歡迎頁)
npm start
5. VSCODE編輯
code .
6.修改routers/index.js, 增加以下代碼段,注意按你實際配置來(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.訪問 localhost:3000/json, 不出問題的話能在后端控制臺查看請求結(jié)果
PLUS:
選擇新版本的Node,不能低于17.5.0,否則不能直接使用fecth,在文末有補充說明。
低版本用node-fetch庫或者原生的http模塊, node-fetch我自己導(dǎo)入一直有問題,原生http模塊要寫不少東西,故不采用。
補充:寫 Node.js,終于能用 Fetch 發(fā)請求了
Node.js 支持 Fetch API 啦!

在以前,使用原生的 Node.js API 發(fā)送一個 HTTP 請求非常麻煩,你可能要寫下面的代碼:
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()所以通常,我們可能會引入一些第三方的 NPM 包,比如 axios、needle、node-fetch、request 這些。

在最新的 Node.js v17.5 版本中,增加了對 Fetch API 的支持,所以無需借助這些第三方 HTTP 請求庫啦。
Fetch API 可能大家都比較熟悉了,他是當(dāng)前最流行的跨平臺 HTTP Client API ,目前已經(jīng)可以在瀏覽器和 Web/Service Workers 中運行,當(dāng)前 Web 環(huán)境里用到最多的請求方式應(yīng)該就是它了。
Node.js 中的Fetch API 基于 Undici 實現(xiàn),它提供了一個 WHATWG 標(biāo)準(zhǔn)接口來獲取資源,并且也是基于 Promise 的,使用方式基本和瀏覽器中一致,包括四個核心模塊:
fetch()- 用于發(fā)起請求的函數(shù)Headers類 - 用于處理請求頭和響應(yīng)頭Request類 - 表示傳入請求的實例Response類 - 表示傳入響應(yīng)的實例
const res = await fetch('https://www.conardli.top');
const json = await res.json();
console.log(json);其實這并不是簡單的支持了一個新的原生 HTTP 請求庫那么簡單,這意味著很多之前在 Web 中用到 Fetch 的 NPM 包也可以在 Node.js 里以同樣的方式工作了,這些包同樣可以實現(xiàn)跨平臺兼容了~
在 Node.js v17.5 中,它還是個實驗特性,現(xiàn)在想要試用的話可以通過 node --experimental-fetch flag 開啟。
Fetch 的優(yōu)勢在于它是原生支持,并且可以兼容多平臺,其他的請求庫估計都要慢慢的靠邊站了~ 對此你有啥看法?
到此這篇關(guān)于Node.js 中使用fetch 按JSON格式發(fā)post請求的文章就介紹到這了,更多相關(guān)Node.js fetch post請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一會帶你學(xué)會用Webpack搭建開發(fā)環(huán)境并打包代碼
這篇文章主要給大家介紹了關(guān)于如何用Webpack搭建開發(fā)環(huán)境并打包的相關(guān)資料,webpack是一個現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler),需要的朋友可以參考下2023-08-08
node.js學(xué)習(xí)總結(jié)之調(diào)式代碼的方法
調(diào)式代碼很多時候類似于查案一樣,只是結(jié)果的重要程度不同,警察查案為的是人民安穩(wěn),而我們調(diào)式則是為了系統(tǒng)的安穩(wěn)。既然這樣我們就不要冤枉任何一段代碼和程序,以免他們受到不合理的懲罰。2014-06-06
nodejs實現(xiàn)的http、https 請求封裝操作示例
這篇文章主要介紹了nodejs實現(xiàn)的http、https 請求封裝操作,結(jié)合實例形式分析了node.js針對http、https 請求的封裝與使用相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
node.js中express中間件body-parser的介紹與用法詳解
這篇文章主要給大家介紹了關(guān)于node.js中express中間件body-parser的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05
從零學(xué)習(xí)node.js之搭建http服務(wù)器(二)
NodeJs是什么我想大家已經(jīng)很了解了,作為一個前端工程師,想要不斷提升自己,一般都會接觸到后端服務(wù)器的技術(shù),NodeJs給我們提供了一個學(xué)習(xí)成本相對較低的捷徑可走。下面這篇文章主要介紹了node.js中搭建http服務(wù)器的相關(guān)資料,需要的朋友可以參考下。2017-02-02
Node.js使用Express創(chuàng)建Web項目詳細(xì)教程
如果需要入門使用node.js進(jìn)行web開發(fā),正在學(xué)習(xí) nodejs web開發(fā)指南 的和想快速了解node.js web開發(fā)模式的朋友,相信本文是有一定幫助意義的。2017-03-03
npm?install編譯時報"Cannot?read?properties?of?null?(r
這篇文章主要給大家介紹了關(guān)于npm?install編譯時報“Cannot?read?properties?of?null?(reading?‘pickAlgorithm‘)“錯誤的解決辦法,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07

