fetch 獲取/提交數(shù)據(jù)，以及開發(fā)環(huán)境下的數(shù)據(jù) Mock
在 jQuery 開發(fā)時代，jQuery 已經(jīng)為我們封裝了非常優(yōu)雅的 ajax 函數(shù)，并且針對各個瀏覽器都做了很好的兼容，非常棒。但是如果你用 React vue 或者 angular 去開發(fā) webapp 時候，你還會再為了一個 ajax 去集成 jQuery 嗎？這是一個問題。
另外一個問題，JavaScript 中的 ajax 很早之前就有一個詬病————復(fù)雜業(yè)務(wù)下的 callback 嵌套的問題。如果你對此了解不深刻，建議你去查一下“JavaScript promise”相關(guān)的資料。promise 正是 js 中解決這一問題的鑰匙，并且作為標準在 ES6 中發(fā)布，接下來要介紹的 fetch 就用到了最新的 promise
fetch就是一種可代替 ajax 獲取/提交數(shù)據(jù)的技術(shù)，有些高級瀏覽器已經(jīng)可以window.fetch使用了。相比于使用 jQuery.ajax 它輕量（只做這一件事），而且它原生支持 promise ，更加符合現(xiàn)在編程習(xí)慣。
安裝
根據(jù)文檔提示，用 npm 安裝的話，執(zhí)行npm install whatwg-fetch --save即可安裝。為了兼容老版本瀏覽器，還需要安裝npm install es6-promise --save。安裝完成之后，注意看一下package.json中的變化。
基本使用
get 的基本使用
參見./app/fetch/test.js源碼，首先要引入依賴的插件
import 'whatwg-fetch'
import 'es6-promise'
然后這樣就可以發(fā)起一個 get 請求。這里的fetch是引用了插件之后即可用的方法，使用非常簡單。方法的第一個參數(shù)是 url 第二個參數(shù)是配置信息。
var result = fetch('/api/1', {
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*'
}
});
以上代碼的配置中，credentials: 'include'表示跨域請求是可以帶cookie（fetch 跨域請求時默認不會帶 cookie，需要時得手動指定 credentials: 'include'。這和 XHR 的 withCredentials 一樣），headers可以設(shè)置 http 請求的頭部信息。
接著說。
fetch 方法請求數(shù)據(jù)，返回的是一個 Promise 對象，接下來我們就可以這樣用了——完全使用Promise的語法結(jié)構(gòu)。
result.then(res => {
return res.text()
}).then(text => {
console.log(text)
})
或者這樣用
result.then(res => {
return res.json()
}).then(json => {
console.log(json)
})
注意，以上兩個用法中，只有res.text()和res.json()這里不一樣————這兩個方法就是將返回的 Response 數(shù)據(jù)轉(zhuǎn)換成字符串或者JSON格式，這也是 js 中常用的兩種格式。
post 的基本使用
參見./app/fetch/test.js源碼，首先要引入依賴的插件
import 'whatwg-fetch'
import 'es6-promise'
然后用 fetch 發(fā)起一個 post 請求（有method: 'POST'），第一個參數(shù)是 url，第二個參數(shù)是配置信息。注意下面配置信息中的headers和body的格式。
var result = fetch('/api/post', {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/x-www-form-urlencoded'
},
// 注意 post 時候參數(shù)的形式
body: "a=100&b=200"
});
fetch 提交數(shù)據(jù)之后，返回的結(jié)果也是一個 Promise 對象，跟 get 方法一樣，因此處理方式也一樣，上面剛描述了，因此不再贅述。
抽象get和post
如果每次獲取數(shù)據(jù)，都向上面一樣寫好多代碼，就太冗余了，我們這里將 get 和 post 兩個方法單獨抽象出來。參見./app/fetch/get.js和./app/fetch/post.js的源碼。
需要注意的是，post.js中，將參數(shù)做了處理。因為上面的代碼中提到，body: "a=100&b=200"這種參數(shù)格式是有要求的，而我們平時在 js 中使用最多的是 JSON 格式的數(shù)據(jù)，因此需要轉(zhuǎn)換一下，讓它更加易用。
這兩個方法抽象之后，接下來我們再用，就變得相當簡單了。參見 ./app/fetch/data.js
// '/api/1' 獲取字符串
var result = get('/api/1')
result.then(res => {
return res.text()
}).then(text => {
console.log(text)
})
數(shù)據(jù) Mock
在目前互聯(lián)網(wǎng)行業(yè) web 產(chǎn)品開發(fā)中，前后端大部分都是分離開發(fā)的，前端開發(fā)過程中無法實時得到后端的數(shù)據(jù)。這種情況下，一般會使用三種方式：
- 模擬靜態(tài)數(shù)據(jù)：即按照既定的數(shù)據(jù)格式，自己提供一些靜態(tài)的JSON數(shù)據(jù)，用相關(guān)工具（如fis3）做接口來獲取這些數(shù)據(jù)。該形式使用不比較簡單的、只用 get 方法的場景，該項目不適用。
- 模擬動態(tài)接口：即自己用一個 web 框架，按照既定的接口和數(shù)據(jù)結(jié)構(gòu)的要求，自己模擬后端接口的功能，讓前端項目能順利跑起來。該方式適用于新開發(fā)的項目，后端和前端同時開發(fā)，適用于該教程的項目。
- 轉(zhuǎn)發(fā)線上接口：項目開發(fā)中，所有的接口直接用代理獲取線上的數(shù)據(jù)，post 的數(shù)據(jù)也都直接提交到線上。該方式適用于成熟項目中，而該項目是新開發(fā)的，沒有線上接口，不適用。
最后強調(diào)一下，該教程是一個前端教程，面向的是前端工程師，后端的開發(fā)和處理交給后端工程師來做。后端的業(yè)務(wù)處理和開發(fā)過程，不在本教程的講解范圍之內(nèi)。
安裝
這里我們使用目前比較流行的 koa 來做后端接口的模擬。因此要先安裝 koa 極其相關(guān)的插件。執(zhí)行npm install koa koa-body koa-router --save-dev，注意這里使用--save-dev，意思是我們只在開發(fā)過程中使用 koa ，項目發(fā)布之后 koa 就沒用了。因為發(fā)布之后的項目，使用的就是后端工程師開發(fā)的線上的接口，而不是我們基于 koa 寫的接口。
注意，該教程重點關(guān)注前端和 React，對于 koa 我們只介紹用到的常用功能。想學(xué)習(xí)可以去官網(wǎng)或者找相關(guān)教程。
模擬接口
我們將模擬接口的代碼都寫在./mock目錄下，接口文件是./mock/server.js（目前只有這一個文件，真正開發(fā)項目時，應(yīng)該會分不同模塊）。
然后在./package.json中增加如下代碼，然后執(zhí)行npm run mock即可啟動模擬的接口服務(wù)。
"scripts": {
"mock": "node --harmony ./mock/server.js",
},
啟動之后，隨便找一個 get 的接口，訪問以下，例如http://localhost:3000/api/1
使用 webpack-dev-server 的代理
到這里你可能會有一個疑問————koa 接口的端口是3000，而我們項目的接口是8080，這樣不就跨域了嗎？————如果默認情況下，肯定是跨域了。此時就需要 webpack-dev-server 做一個代理的轉(zhuǎn)發(fā)。配置代碼在./webpack.config.js中
devServer: {
proxy: {
// 凡是 `/api` 開頭的 http 請求，都會被代理到 localhost:3000 上，由 koa 提供 mock 數(shù)據(jù)。
// koa 代碼在 ./mock 目錄中，啟動命令為 npm run mock
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
// ...省略若干代碼...
}
