在项目中使用 fetch

在目前的项目开发中，要使用到 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 等以后的文章中会有提到。

在项目中使用 fetch

推荐阅读更多精彩内容