認識異步

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

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

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

fetch(url)

為了方便學(xué)習(xí)，我們借用一下uni-app教程的api接口。

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

我們需要知道fetch是基于Promise設(shè)計的，如果不了解推薦先學(xué)習(xí)一下es6的Promise。

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

既然是Promise，那么就可以.then回調(diào)，我們試試。

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

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

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

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

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

response.json()

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

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

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

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

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

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

結(jié)合async和await

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

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

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

  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ù)。

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

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

總結(jié)

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

最新評論