在目前的项目开发中，要使用到 ajax 时，首先想到的 jquery 的 $.ajax 或者 angular 的 $http，就以 jq 而言，可能整个项目中，要用到 jq 的，只有 ajax，但是却需要引入整个 jq 库，这是一个多么绝望的事情，逛开发者头条的时候，偶然看到了这篇文章 传统 Ajax 已死，Fetch 永生，纳尼？ajax 咋就死了，fetch 是什么鬼？
一句话解释 fetch 与 ajax 的区别。
Fetch API 使用了 Promises，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。
具体 fetch 有什么优缺点，大家去 baidu，google 有很多，我这里就不说了，这里只讲怎么简单使用。
为了传出去的参数为 form-data，先写个函数把参数对象转换成get参数的形式
getParams(obj){
let resStr = "";
let resArr = [];
for(let item in obj){
let str = item + "=" + obj[item];
resArr.push(str);
}
resStr += resArr.join("&");
return resStr;
}
// 设入参为 {"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 的参数
- method 就不解释了
- 注释掉的 credentials 是决定是否要带 cookies
- headers 的内容意思传的是 form-data
- mode 是有关跨域的，cors 的意思是跨域，稍后解释为什么是跨域的
- body 里面就是要传的参
下面的形式就是 promise 的写法了，还没研究过的童鞋可以去看一下阮一峰老师的博客
第一个 then 中的 res.json() 为读取 Response 对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为 JSON 格式的 promise 对象
fetch 的具体参数和方法，可以查看 MDN
后台使用 node 写的，这里说明一下前面使用了跨域的原因，前端使用了 webpack-dev-server 进行编译，监听的端口为 8080，而后台的端口为 1234，不符合同源协议，所以使用了跨域。
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);
});
- 第一行设置了 header，允许跨域访问
- 第二行注释掉了，如果 fetch 中允许携带 cookies 的话，则要写上这一行
- 前端传过来的参数就在 req.body 中
- 只为了测试，所以再将参数返还给前端
以上就是一个简单的 fetch 的跨域 post 请求，可以自己敲一遍试一下，虽然目前 fetch 的兼容性不是很好，但是使用了 polyfill 以后，可以使兼容性达到 ie8+。。。具体的 polyfill 与 async/await 等以后的文章中会有提到。
:)
网友评论