認識異步

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

因為請求需要時間向服務器發(fā)送請求和接收請求結果。

我們得要等待請求完成然后執(zhí)行請求完成后的回調，來對接收到的請求結果做處理。

fetch(url)

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

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

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

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

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

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

它返回的是什么呢？是一個response。

response是它封裝好的一個對象，里面返回了請求的一些參數(shù)。

比較有用的例如status，告訴你請求的狀態(tài)碼是200，說明發(fā)送請求成功了。

然后我們既然發(fā)送了get請求，我們最關心的肯定是請求到的數(shù)據(jù)在哪里呢？

response.json()

別急，點開Response的Prototype原型，會發(fā)現(xiàn)有一個json方法。

直接告訴你這個方法也返回一個Promise。

那我們就可以將這個promise繼續(xù)返回進行下一步回調。

在下一步里輸出一下結果看看是什么東西。

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

原來我們要得到的數(shù)據(jù)在這里。

結合async和await

上面雖然我們已經(jīng)可以使用fetch來執(zhí)行回調來進行請求了，但是使用回調還是顯得代碼不夠優(yōu)雅。

不過如果你知道與異步相關的關鍵字async與其中的await，就有可以替代的編寫方式了。

給函數(shù)添加async之后函數(shù)就會變成異步函數(shù)，其中可以使用await使代碼對異步操作Promise進行等待，把回調結果返回，有一絲把異步變同步的意味。

  const fetchAPI = async () => {
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
  }

  fetchAPI()

異常處理

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

  const fetchAPI = async () => {
    const response = await fetch(url)
    if(response.status===200){
		const data = await response.json()
		console.log(data)
    }else{
		console.log('請求異常')
	}
  }

  fetchAPI()

然后為了更嚴謹?shù)目紤]一些意外狀況，再套上異常捕獲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的第二個入?yún)⑹莻€對象，就是請求的配置參數(shù)。

請求方法可以設置post，還可以設置請求頭還有post的入?yún)ⅰ?/p>

  fetch(url, {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
      ...
    },
    body: JSON.stringify({
      'key': value,
      ...
    })
  })

總結

到此這篇關于js fetch異步請求使用的文章就介紹到這了,更多相關js fetch異步請求使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論