FetchAPI 的使用

Fetch是什么?

　　fetch是用来取代传统的XMLHttpRequest的。 它的优点很多，包括链式调用的语法、返回promise等。

　　fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。

　　传统的XMLHttpRequest请求闲的非常的杂乱，而优雅的ajax又不得不额外加载jQuery这个80K左右的框架

　　但是现在，我们可以使用Fetch，提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义，

　　它还提供了一种定　义，将 CORS 和 HTTP

　　原生的头信息结合起来，取代了原来那种分离的定义。

　　But，Fetch 兼容性，可以看到，兼容性很差，移动端全军覆没，不过可以使用Fetch polyfill

　　链接：https://www.jianshu.com/p/11f64a03d3f3

 

　　传统的xhr请求写起来非常的混乱，如：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

　　但是使用fetch之后，如:

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

　　所以是这种链式调用的风格看上去会非常舒服。

　　如果我们再使用了箭头函数就会更加简洁了。 

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

基本使用方法

fetch必须接受一个资源路径作为参数，并且返回了一个promise，所以我们可以直接使用链式调用的方式。 

fetch("/getAllProduct").then(function(res) {
            return res.json();
        }).then(function (data) {
            if (data.code == 200) {
              console.log('获取到所有产品' ,data.data);
              that.props.addAllProduct(data.data);
            } else {
              console.log(data.message);
            }
        })

这样，我们就可以发送一个ajax请求。

/* 对客户端的返回数据封装
 * @param [code] (number) code为返回的状态码
 * @param [message] (string) message为返回的信息
 * @param [data] (any) data是可选的，为返回给前端的数据
 */
// 注意： retrunJson中的res为node处理接口的回调函数中的res，这个是必须的。
function returnJson(res, code, message, data) {
    var response = {
        code: code,
        message: message
    };
    if (typeof data !== 'undefined') {
        response.data = data;
    }
    res.json(response);
　　 // 返回这个请求之后，必须要 res.end()表示请求的结束，否则后台可能会崩溃。
    res.end();
}

router.post('/register', function (req, res) {
    let userName = req.body.username,
        password = req.body.password,
        passwordAgain = req.body.passwordAgain,
        type = req.body.type;
    console.log(userName, password, type);
    if (type == 1) {
        if (password == passwordAgain) {
            let managerId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new Manager({
                name: userName,
                password: password,
                type: req.body.type,
                managerId: managerId
            });

            Manager.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    } else if( type == 2) {

         if (password == passwordAgain) {
            let userId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new User({
                name: userName,
                password: password,
                type: req.body.type,
                userId: userId
            });

            User.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    }
});

这样，我们就可以处理一个ajax请求。

 

注意点：

1、fetch() 返回的是一个Promise对象。

　　fetch使用的promise对象可以使得我们使用同步的方式写异步函数。

 

2、 fetch api是可以结合 async 和 await 来使用的。 

　　fetch是基于promise实现的，但是使用promise的写法，我们还是可以看到callback的影子，如果结合 async和await来使用，还是非常不错的。

 

3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。

 

4、 fetch api 可以跨域。 

　　参考： https://fetch.spec.whatwg.org/#http-cors-protocol

　　跨域请求必须包括  Origin 作为header. 

5、fetch提供了对request和response对象的通用定义。

　 Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。所以在一个Fetch请求中，完全可以只使用Request 和 Response两个对象，通过Request 设置参数，通过Response 对返回值进行处理。　

　所以，我们可以将一个fetch定义如下：

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var option = { method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default' };
var myRequest = new Request('https://api.github.com/users/mzabriskie',option);
fetch(myRequest).then(function(response) {
    ... 
});

参考文章：　https://github.com/camsong/blog/issues/2