在目前的項目開發(fā)中绩衷，要使用到 ajax 時，首先想到的 jquery 的 $.ajax 或者 angular 的 $http喝检，就以 jq 而言纯趋，可能整個項目中憎兽，要用到 jq 的，只有 ajax吵冒，但是卻需要引入整個 jq 庫纯命，這是一個多么絕望的事情，逛開發(fā)者頭條的時候痹栖，偶然看到了這篇文章 傳統(tǒng) Ajax 已死亿汞，F(xiàn)etch 永生，納尼揪阿？ajax 咋就死了疗我，fetch 是什么鬼？
一句話解釋 fetch 與 ajax 的區(qū)別南捂。
Fetch API 使用了 Promises吴裤，它讓接口更簡單、簡潔溺健，避免了回調(diào)的復(fù)雜性麦牺，省去了使用復(fù)雜的 XMLHttpRequest API。
具體 fetch 有什么優(yōu)缺點，大家去 baidu剖膳，google 有很多魏颓，我這里就不說了，這里只講怎么簡單使用吱晒。
為了傳出去的參數(shù)為 form-data琼开，先寫個函數(shù)把參數(shù)對象轉(zhuǎn)換成get參數(shù)的形式
getParams(obj){
let resStr = "";
let resArr = [];
for(let item in obj){
let str = item + "=" + obj[item];
resArr.push(str);
}
resStr += resArr.join("&");
return resStr;
}
// 設(shè)入?yún)?{"L": 1, "Z": 2, "Q": 3}
// 則出參為 L=1&Z=2&Q=3
fetch 部分的代碼
let getStr = this.getParams(data);
let request = new Request(URL, {
method: "POST",
// credentials: 'include',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
mode: "cors",
body: getStr,
});
fetch(request)
.then(
(res) => {
return res.json();
}
)
.then(
(data) => {
console.log(data);
}
)
.catch(
(err) => {
console.log(err);
}
)
前端是用 react 寫的，可能有些部分對于不使用 react 的朋友來說看起來有點奇怪枕荞，但是并不影響理解。
解釋一下fetch 的參數(shù)
- method 就不解釋了
- 注釋掉的 credentials 是決定是否要帶 cookies
- headers 的內(nèi)容意思傳的是 form-data
- mode 是有關(guān)跨域的搞动，cors 的意思是跨域躏精，稍后解釋為什么是跨域的
- body 里面就是要傳的參
下面的形式就是 promise 的寫法了，還沒研究過的童鞋可以去看一下阮一峰老師的博客
第一個 then 中的 res.json() 為讀取 Response 對象并且將它設(shè)置為已讀（因為Responses對象被設(shè)置為了 stream 的方式鹦肿，所以它們只能被讀取一次） ,并返回一個被解析為 JSON 格式的 promise 對象
fetch 的具體參數(shù)和方法矗烛，可以查看 MDN
后臺使用 node 寫的，這里說明一下前面使用了跨域的原因箩溃，前端使用了 webpack-dev-server 進(jìn)行編譯瞭吃，監(jiān)聽的端口為 8080，而后臺的端口為 1234涣旨，不符合同源協(xié)議歪架，所以使用了跨域。
node 使用了 express 霹陡，接口部分代碼為
router.post('/', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
// res.header("Access-Control-Allow-Credentials", true);
var dataObj = req.body;
res.json(dataObj);
});
- 第一行設(shè)置了 header和蚪，允許跨域訪問
- 第二行注釋掉了，如果 fetch 中允許攜帶 cookies 的話烹棉，則要寫上這一行
- 前端傳過來的參數(shù)就在 req.body 中
- 只為了測試攒霹，所以再將參數(shù)返還給前端
以上就是一個簡單的 fetch 的跨域 post 請求，可以自己敲一遍試一下浆洗，雖然目前 fetch 的兼容性不是很好催束，但是使用了 polyfill 以后，可以使兼容性達(dá)到 ie8+伏社。抠刺。。具體的 polyfill 與 async/await 等以后的文章中會有提到摘昌。
:)
