Vue-promise请求数据&调用方法

1. Promise 基本概念：

1. Promise是一个构造函数，所以可以 new 出一个Promise的实例；
2. 在Promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数)；
3. 在Promise构造函数的prototype属性上，有一个 .then() 方法。
   所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法；
4. Promise表示一个一步操作，每当我们new一个Promise的实例，这个实例就代表具体的 异步 操作。
5. Promise创建的实例，是一个异步操作，这个异步操作结果，只有两种结果：
   状态1：异步执行 成功，需要在内部调用成功的回调函数resolve把结果返回给调用者
   状态2：异步执行 失败，需要在内部调用失败的回调函数reject把结果返回调用者
6. 由于Promise的实例是一个异步操作，所以内部拿到操作结果后，无法使用return把操作结果返回给调用者 ，
   这个时候只能使用 回调函数 的形式，把成功或失败的结果，返回给调用者，具体：
   我们可以在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操作，指定成功(resolve)和失败(reject)回调函数。

2. Promise请求数据函数的封装&调用方法：

<script type="text/javascript">
    //测试一个请求网址
    var baseUrl = "https://api.apiopen.top/";
    //用promise封装ajax请求
    function ajaxPromise(type,_url){
        return new Promise(function(resolve,reject){// Promis实例化
            var xhr = new XMLHttpRequest();
            xhr.open(type,_url);
            xhr.send();
            xhr.addEventListener("readystatechange",function(){
                if(xhr.readyState !=4 ){// 监听状态不对的时候 不指定函数
                    return;
                }
                if(xhr.readyState==4&&xhr.status==200){
                    var res = JSON.parse(xhr.responseText);
                    console.log("ajaxPromise",res)
                    resolve(res); // 回调成功返回
                }else{
                    reject();// 回调失败返回
                }
            })
        })
    }
    
    //第1种调用方法 --- then().catch()
    ajaxPromise("get",baseUrl+"recommendPoetry").then(function(res){
        console.log("请求成功",res);
    }).catch(function(){
        console.log("请求失败")
    })
    //第2种调用方法 --- then(function,function)
    ajaxPromise("get",baseUrl+"recommendPoetry").then(function(res){
        console.log("请求成功2",res);
    },function(){
        console.log("请求失败2")
    })
</script>