Fetch API與POST請求那些事
阿新 • • 發佈：2020-03-07
## 簡述
相信不少前端開發童鞋與後端聯調介面時，都會碰到前端明明已經傳了引數，後端童鞋卻說沒有收到，尤其是`post`請求，遇到的非常多。本文以`node.js`作為服務端語言，借用`express`框架，簡要分析客戶端傳送`post`請求的四種方式以及服務端如何接收。本文客戶端請求沒有藉助第三方`ajax`庫，採用的是`Fetch API`，雖然瀏覽器相容性有點問題，但是用法簡潔靈活，以後可能會是一個趨勢。在說`post`請求之前，先簡要概述下`Fetch API`。
## Fetch API
`Fetch API`提供了一個獲取資源的介面（包括跨域請求），提供了更強大和靈活的功能集。未來可能是`XMLHttpRequest`的一種替代方案。去年`GitHub`程式碼去`jQuery`重構時，就使用`Fetch API`替代`jQuery`的`ajax`，畢竟目前`JavaScript`很多原生語法都進行了大量精簡，比如`DOM`操作`API`、`http`請求`fetch`、`es6+`等。今天的`axios`可能就是明日的`jQuery`！
### 簡單的例項
`Fetch API`主要暴露了三個介面一個方法。
***
- 三個介面
- `Request`(資源請求)
- `Response`(請求的響應)
- `Headers`(`Request/Response`頭部資訊)
- 一個方法
- `fetch()`(獲取資源呼叫的方法)
```javascript
// 例項化一個Request例項
// 第一個引數一般指資源路徑
// 第二個引數可以理解為請求的配置項，包含頭部資訊和http請求一些關鍵配置（請求型別、引數...）
let requestInstance = new Request('/hello', {
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: '{"hello": "world"}'
})
// fetch方法引數同Request例項
// 第一個引數為url或者Request例項
// 第二個引數為請求配置項
fetch(requestInstance).then(response => {
// 返回的是一個Response的例項
// 呼叫Response例項的序列化方法，序列化成json,返回值是一個promise
// 序列化方法有 json,text,formData,blob,arrayBuffer,redirct
let result = response.json()
result.then(res => {
consolee.log(res)
})
})
```
### 有意思的特性
`Fetch API`添加了一個實驗性的功能，支援客戶端手動取消`http`請求了，這個比較有意思，因為之前的`ajax`貌似都不支援手動取消。藉助`AbortSignal`介面，可以通過`AbortController`例項化一個控制器，將例項的`siginal`當做請求的配置項，傳遞到服務端，客戶端可以通過`AbortController`例項的`abort`方法，來終止當前的`http`請求，示例程式碼如下：
```html