js fetch非同步請求使用詳解

在下月亮有何貴幹發表於2021-11-01
JS非同步

目錄

認識非同步

首先我們得明白請求是一個非同步的過程。

因為請求需要時間向伺服器傳送請求和接收請求結果。

我們得要等待請求完成然後執行請求完成後的回撥，來對接收到的請求結果做處理。

fetch(url)

為了方便學習，我們借用一下uni-app教程的api介面。

  const url = 'https://unidemo.dcloud.net.cn/api/news'

我們需要知道fetch是基於Promise設計的，如果不瞭解推薦先學習一下es6的Promise。

fetch(url)可以直接傳送get請求，而且本身是個Promise。

既然是Promise，那麼就可以.then回撥，我們試試。

  fetch(url).then(res => {
    console.log(res)
  })

它返回的是什麼呢？是一個response。
在這裡插入圖片描述

response是它封裝好的一個物件，裡面返回了請求的一些引數。

比較有用的例如status，告訴你請求的狀態碼是200，說明傳送請求成功了。

然後我們既然傳送了get請求，我們最關心的肯定是請求到的資料在哪裡呢？

response.json()

別急，點開Response的Prototype原型，會發現有一個json方法。
在這裡插入圖片描述
直接告訴你這個方法也返回一個Promise。

那我們就可以將這個promise繼續返回進行下一步回撥。

在下一步裡輸出一下結果看看是什麼東西。

  fetch(url).then(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()

異常處理

而且我們可以在第一步response中的狀態碼來判斷能否正常進行下一步。

  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,
      ...
    })
  })

相關文章