我一直在研究 promise、await 和 async 函式。當我剛剛在學習 Promise 的階段時，我意識到以下幾點：當我發送兩個請求時，并不能保證它們會按照它們在代碼中撰寫的順序來。當然，一個網路的路由和資料包。當我運行下面的代碼時，請求將不按特定順序解決。
const getCountry = async country => {
await fetch(`https://restcountries.com/v2/name/${country}`)
.then(res => res.json())
.then(data => {
console.log(data[0]);
})
.catch(err => err.message);
};
getCountry('portugal');
getCountry('ecuador');
在這一點上，我還沒有了解異步和等待。所以，下面的代碼完全按照我想要的方式作業。每個請求都等到另一個請求完成。
這是最簡單的方法嗎？有沒有我可以洗掉的冗余？我不需要大量替代示例。除非我做錯了什么。
await fetch(`https://restcountries.com/v2/name/${country}`)
.then(res => res.json())
.then(data => {
console.log(data[0]);
})
.catch(err => err.message);
};
const getCountryData = async function () {
await getCountry('portugal');
await getCountry('ecuador');
};
getCountryData();
提前致謝，
uj5u.com熱心網友回復：
是的，這是正確的做法。請務必意識到，您正在阻止每個請求，因此它們一次運行一個請求，從而導致效率低下。正如我所提到的，JavaScript 的美妙之處在于它的異步性，所以要好好利用它。您可以幾乎同時運行所有請求，從而使您的請求大大加快。舉個例子：
// get results...
const getCountry = async country => {
const res = await fetch(`https://restcountries.com/v2/name/${country}`);
const json = res.json();
return json;
};
const getCountryData = async countries => {
const proms = countries.map(getCountry); // create an array of promises
const res = await Promise.all(proms); // wait for all promises to complete
// get the first value from the returned array
return res.map(r => r[0]);
};
// demo:
getCountryData(['portugal', 'ecuador']).then(console.log);
// it orders by the countries you ordered
getCountryData(['ecuador', 'portugal']).then(console.log);
// get lots of countries with speed
getCountryData(['mexico', 'china', 'france', 'germany', 'ecaudor']).then(console.log);編輯：我剛剛意識到Promise.all會為您自動排序承諾，因此無需添加額外的排序功能。如果您采用不同的方法，無論如何都可以參考以下排序 fn：
myArr.sort((a, b) =>
(countries.indexOf(a.name.toLowerCase()) > countries.indexOf(b.name.toLowerCase())) ? 1 :
(countries.indexOf(a.name.toLowerCase()) < countries.indexOf(b.name.toLowerCase()))) ? -1 :
0
);
uj5u.com熱心網友回復：
我按照@deceze 推薦的方式嘗試了它，并且效果很好：我洗掉了所有的.then并用await. 這樣干凈多了。現在我可以使用普通的 try 和 catch 塊了。
// GET COUNTRIES IN ORDER
const getCountry = async country => {
try {
const status = await fetch(`https://restcountries.com/v2/name/${country}`);
const data = await status.json();
renderCountry(data[0]); // Data is here. Now Render HTML
} catch (err) {
console.log(err.name, err.message);
}
};
const getCountryData = async function () {
await getCountry('portugal');
await getCountry('Ecuador');
};
btn.addEventListener('click', function () {
getCountryData();
});
謝謝你們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/421108.html
標籤：