認識異步
首先我們得明白請求是一個異步的過程。
因為請求需要時間向服務器發送請求和接收請求結果。
我們得要等待請求完成然后執行請求完成后的回調，來對接收到的請求結果做處理。
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,
...
})
})