Promise fetch

什么是Promise：

        Promise是回调地狱的解决方案之一，我们使用promise的语法来解决回调函数地狱的问题，使代码拥有可读写和可维护性。

      （是高版本浏览器才提供给我们的一个构造函数，低版本浏览器不支持）

    

Promise的三个状态：

        pending     异步的事情正在执行

        fulfilled   异步的事情成功了

        rejected    异步的事情失败了

 

 Promise的基本语法：

　　1. 创建一个状态机

　　　　传入一个resolver函数　　

　　　　resolver里面有两个状态改变工具：成功resolve，失败reject

var p = new Promise( function( resolve , reject ){
     setTimeout( function(){
          // resolve();
　　　　　  // reject();
　　　　　  reject("hello 状态改变为失败"); 
　　　}, 3000 ); 
});
console.log(p);

　　2. 关注状态机的状态

　　　　成功处理　　then

　　　　失败处理　　then　　catch

       p.then(function( res ){
            // 如果状态成功了，那么会执行当前的函数；
            console.log("状态改变为 resolved" , res);
        })
        p.catch( function( res ){
            console.log("状态改变为 rejected" , res);
        })  

 

注意： Promise的状态只可以改变一次

 

封装简单的Ajax　　（Promise的作用是去掉回调函数的）

promise 是啥 ？

　　promise就是一个对象；在 ajax 封装里面返回 一个promise对象，在这个对象外面去监听状态的改变。

       function ajaxPromise( url ){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            var p = new Promise( function( resolve ){
                xhr.onload = function(){
                    resolve(xhr.responseText);
                }
            })
            return p;
        }
        var p1 = ajaxPromise( "./04_CORS.php" );
        var p2 = p1.then( function( res ){
            console.log(res,"p1");
        })    
        var p3 = p2.then( function(res){
            console.log(res,"p2")
            var p3 = ajaxPromise( "./04_CORS.php" );
            return p3;
        })
        p3.then(function(res){
            console.log(res,"p3");
        })

 

fetch  API      是浏览器已经封装好的一个API

fetch  API      返回的结果就是promise

高版本浏览器，更倾向于移动端的一个API（兼容性不好）

        var data = {
            a : 1,
            b : 2
        }
        var p1 = fetch("./10_data.php",{
                        method: 'POST', 
                        body: "a=1&b=2", 
                        headers: new Headers({
                            'Content-Type': 'application/x-www-form-urlencoded'
                        })
                });
        var p2 = p1.then( function( res ){
            return res.json();
        })
        p2.then( function(res){
            console.log(res);
        })
        console.log(p1);