js fetch非同步請求使用例項詳解
目錄
- 認識非同步
- fetch(url)
- response.on()
- 結合async和await
- 異常處理
- post請求
- 總結
認識非同步
首先我們得明白請求是一個非同步的過程。
因為請求需要時間向伺服器傳送請求和接收請求結果。
我們得要等待請求完成然後執行請求完成後的回撥,來對接收到的請求結果做處理。
fetch(url)
為了方便學習,我們借用一下uni-app教程的api介面。
const url = 'https://unidemo.dcloud.net.cn/api/news'
我們需要知道fetch是基於Promise設計的,如果不瞭解推薦先學習一下es6的Promise。
fetch(url)可以直接傳送get請求,而且本身是個Promise。
既然是Promise,那www.cppcns.com麼就可以.then回撥,我們試試。
fetch(url).then(res => { console.log(res) })
它返回的是什麼呢?是一個response。
response是它封裝好的一個物件,裡面返回了請求的一些引數。
比較有用的例如status,告訴你請求的狀態碼是200,說明發送請求成功了。
然後我們既然傳送了get請求,我們最關心的肯定是請求到的資料在哪裡呢?
response.json()
別急,點開Response的Prototype原型,會發現有一個json方法。
直接告訴你這個方法也返回一個Promise。
那我們就可以將這個promise繼續返回進行下一步回撥。
在下一步裡輸出一下結果看看是什麼東西。
fetch(url).thPVoiRMGQqen(response => {
return response.json()
}).then(res => {
console.log(res)
})
原來我們要得到的資料在這裡。
結合async和await
上面雖然我們已經可以使用fetch來執行回撥來進行請求了,但是使用回撥還是顯得程式碼不夠優雅。
不過如果你知道與非同步相關的關鍵字async與其中的await,就有可以替代的編寫方式了。
給函式新增async之後函式就會變成非同步函式,其中可以使用await使程式碼對非同步操作Promise進行等待,把回撥結果返回,有一絲把非同步變同步的意味。
const fetchAPI = async () => { const response = await fetch(url) const data = await response.json() console.log(data) } fetchAPI()
異常處理
而且我們可以在第一步respoPVoiRMGQqnse中的狀態碼來判斷能否正常進行下一步。
const fetchAPI = async () => { const response = await fetch(url) if(response.status===200){ const data = await response.json() console.log(data) }else{ console.log('請求異常') } } fetchAPI()
然後為了更嚴謹的考慮一些意外狀況,再套上異常捕獲try-catch。
const fetchAPI = async () => { try { const response = await fetch(url) if (response.status === 200) { const data = await response.json() console.log(data) } else { console.log('請求異常') } } catch (err) { console.log(err) } } fetchAPI()
post請求
fetch的第二個入參是個物件,就是請求的配置引數。
請求方法可以設定post,還可以設定請求頭還有post的入參。
fetch(url,{ method: "POST"客棧,headers: { 'Content-Type': 'application/json',... },body: JSON.stringify({ 'key': value,... }) })
總結
到此這篇關於js fetch非同步請求使用的文章就介紹到這了,更多相關js fetch非同步請求使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!