我知道我的代碼有什么問題，并且我已經研究了解決它的最佳方法，但是由于我缺乏經驗，我很難找到一個好的答案。
我需要在第二條（/logo）快速路線發送資料之前完全完成我的第一條路線（/資料）。簡而言之，我只需要在變數 symbolUrl 進入第二個 fetch 呼叫之前完成它。這是下面的代碼來解釋
app.use(express.static('public'));
const url =
'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest';
const qString =
'?CMC_PRO_API_KEY=' process.env.apiKey '&start=1&limit=10&convert=USD';
let symbol = [];
app.get('/data', async (req, res) => {
const fetch_res = await fetch(url qString);
const coinData = await fetch_res.json();
for (let i = 0; i < 9; i ) {
symbol.push(coinData.data[i]['symbol']);
};
res.json(coinData);
});
app.get('/logo', async (req, res) => {
const symbolUrl = symbol.join(',');
const url2 = 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/info';
const qString2 = `?CMC_PRO_API_KEY=${apiKey}%symbol=${symbolUrl}`;
const fetch_res2 = await fetch(url2 qString2);
const coinLogo = await fetch_res2.json();
res.json(coinLogo);
});
我試圖用這個專案解決的問題是我想先發送要發送到前端的資料（/資料），因為這個 API 呼叫將加載頁面的大部分。然后我的第二次呼叫將在之后加載影像和其他更大的檔案。但是，我正在使用 API 來獲取我想要的特定加密硬幣的徽標（影像），我需要一個不同的端點，并在 API 呼叫中使用 %symbol=${symbolUrl} 來獲取我想要的正確令牌打電話。
客戶端代碼：
fetch('http://localhost:2000/data')
.then(async (response) => {
return response.json();
})
.then(async (data) => {
const parsedData = data['data'];
// console.log(data['data'][0]['name'])
await parsedData.forEach((element) => {
// this just has about 20 lines of code generating the the look of the page. It works as intended
});
fetch('http://localhost:2000/logo')
.then(async (response) => {
return response.json();
})
.then(async (logo) => {
console.log(logo)});
***我試過把它放在一個異步函式中并等待第一個 fetch 呼叫
在執行我的第二個 app.get 之前，我需要做的就是讓 app.get(/data) 完全完成。我已經完成了測驗，我知道這是問題所在。如果這很容易，我深表歉意，但我找不到任何關于使 app.get 同步的東西，我已經嘗試將兩者都放在異步函式中，但是沒有用。
uj5u.com熱心網友回復：
你不能像你試圖做的那樣在片段中發送回應，它會拋出一個錯誤說 Can't set headers after they are sent to client
實作您要執行的操作的正確方法是將第一層定義為中間件，然后允許第二層回傳回應。這里的層基本上意味著一個函式處理程式。
為了控制執行何時傳遞到下一層/下一個函式處理程式，express 有第三個引數（request、response、next）。你只用requestand response，研究一下next就能解決你的顧慮。
表達下一個函式，它到底是干什么用的？
第一個處理程式
app.get('something_unique', async (req, res, next) => {
// do whatever you want to do first
// save data into res.locals
res.locals.foo = {...}
next()
})
第二處理程式
app.get('something_unique', (req, res) => {
const data = res.locals.foo;
// whatever you want
return res.json({ anything })
})
更多的：
- 表達下一個函式，它到底是干什么用的？
- 錯誤：在將標頭發送到客戶端后無法設定標頭
- 在 Express.js 中使用 next() 將變數傳遞給下一個中間件
uj5u.com熱心網友回復：
我不確定您真正運行的是什么客戶端代碼，因為聽起來您已經嘗試了幾件事，但這應該可以對/data請求和/logo請求進行排序，以便在/logo請求回應之前不會運行/data請求已收到。：
async function run() {
const r1 = await fetch('http://localhost:2000/data');
const data = await r1.json();
const parsedData = data.data;
parsedData.forEach((element) => {
// this just has about 20 lines of code generating
// the the look of the page. It works as intended
});
const r2 = await fetch('http://localhost:2000/logo');
const logo = await r2.json();
return logo;
}
run().then(logo => {
console.log(logo);
}).catch(err => {
// handle errors here
console.log(err);
});
如果 內部有任何異步代碼.forEach()，那么我們也必須看到它才能正確排序。
正如我在評論中所說，將來自第一個請求的資料填充到服務器端變數中可能是服務器上的錯誤設計，因為兩個單獨的客戶端都發出/data請求將相互沖突，從而產生競爭條件。但是，您還沒有解釋這些資料的真正用途或為什么要將其填充到服務器上的變數中，以便我們建議替代設計。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/418735.html
標籤：
下一篇：0SVGg元素的y軸位置