認(rèn)識(shí)異步

首先我們得明白請(qǐng)求是一個(gè)異步的過程。

因?yàn)檎?qǐng)求需要時(shí)間向服務(wù)器發(fā)送請(qǐng)求和接收請(qǐng)求結(jié)果。

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

fetch(url)

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

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

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

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

既然是Promise，那么就可以.then回調(diào)，我們?cè)囋嚒?/p>

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

它返回的是什么呢？是一個(gè)response。

response是它封裝好的一個(gè)對(duì)象，里面返回了請(qǐng)求的一些參數(shù)。

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

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

response.json()

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

直接告訴你這個(gè)方法也返回一個(gè)Promise。

那我們就可以將這個(gè)promise繼續(xù)返回進(jìn)行下一步回調(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)來進(jìn)行請(qǐng)求了，但是使用回調(diào)還是顯得代碼不夠優(yōu)雅。

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

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

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

  fetchAPI()

異常處理

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

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

  fetchAPI()

然后為了更嚴(yán)謹(jǐn)?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('請(qǐng)求異常')
      }
    } catch (err) {
      console.log(err)
    }
  }

  fetchAPI()

post請(qǐng)求

fetch的第二個(gè)入?yún)⑹莻€(gè)對(duì)象，就是請(qǐng)求的配置參數(shù)。

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

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

總結(jié)

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

最新評(píng)論