Reactative 网络请求

Reactative 网络请求

按照W3C规范，异步操作应该用AJAX(AsynchronousJavaScript and XML)技术，

Ajax技术基于XMLHttpRequest类实现。

var xhr = new XMLHttpRequest();

xhr.open('GET', url);



xhr.onload = function() {yu

    // To do withxhr.response

};



xhr.onerror = function() {

    // Handling errors

};



xhr.send();

使用XMLHttpRequest你可以模拟进度（监听progress事件），

也可以取消请求（使用abort()方法）

Fetch API提供了一个fetch()方法

该方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。

    fetch(url, fetchOptions)



       .then((responseText) => {

           console.log(responseText);

           funCallBack(JSON.parse(responseText));

       })



       .catch((error) => {

           funError(error);

       });

    fetch(url, fetchOptions)



       .then(

       (responseText) => {

           console.log(responseText);

           successCallBack(JSON.parse(responseText));

       },

       (error)=> {

           console.log(error);

           errorCallBack(JSON.parse(responseText));

       });

onRejected虽然可以接收reject,但不能捕捉onFulfilled抛出的异常，所以用catch更好。

分解

var myHeaders = new Headers();

myHeaders.append('Content-Type','image/jpeg');



var myInit = { method: 'GET',

              headers: myHeaders,

              mode: 'cors',

              cache: 'default' };



var req = new Request(URL, myInit);



var promise = fetch(req);



promise.then();

then方法接受的两个参数都是可选的，而且类型也没限制，

可以是函数，也可以是一个具体的值，还可以是另一个promise。

参考Promise规范

Methods



Promise.prototype.catch(onRejected)



Promise.prototype.then(onFulfilled,onRejected)

Fetch规范中Response对象

promise.then((response)=>{

    response.status;

    response.statusText;

    response.headers;

    response.body;

    response.ok;

});

var reader = response.body.getReader();

reader.read();可以都字节流，如：返回一张图片时。

解析JSON数据

_genArray(responseJson) {

            var dataBlob = [];

       for (var i = 0; i < 100; i++) {

           //获取json元素

           var itemJson = responseJson[i] ? responseJson[i] : '';

           //判断json元素是否为空

           if(itemJson != '' && itemJson != 'undefined'){

               //将json元素的对象转成字符串

               var item = JSON.stringify(eval(itemJson));

               //将json元素字符串转成实体对象。

                        varmodel = eval('('+ item +')' );

                        //输出json元素的字符串

               console.log("_genRows " + item);

               //获取实体的name属性值

               dataBlob.push(model.name);

           }

       }

       return dataBlob;

    }