【无标题】

ES6-Promise基础详解

一、什么是Promise

promise是异步编程的一种解决方法比起传统的回调函数和事件更加的方便和强大。简单来说，promise就相当于一个容器，里面存放着某个未来才会结束的事件的结果，这些结果一旦生成就会无法改变的。从语法上来说，promise是一个对象，通过它可以获取异步操作的消息。promise提供统一的API，各种异步操作都可以用相同的方法进行处理。

二、为什么要使用promise

主要用于Ajax和axios请求。简单来说，就是由于网速的不同，可能会带来的返回值的时间也会不同，但是我们下一步将要执行的代码是依靠于上一步请求的返回值，所以这个时候我们就需要等待，等待上一步的结果出来了之后才决定下一步该怎么继续。

三、promise的作用

1.主要用于解决回调嵌套的问题，也就是常说的“回调地狱”
2.执行多并发请求获取数据。

四、promise的三种状态

1.pending:进行中，表示结果还在处理之中；
2.resolved(fulfilled):已成功，表示已经得到了结果，可以获取结果或者进行下一步操作；
3.rejected:已失败，得到了不是我们想要的结果，拒绝执行下一步操作。
这三种状态都不受外界的影响，且状态只能顺向改变，不可逆。

五、基本用法

ES6规定，promise对象是一个构造函数，用来生成promise实例。

    const promise = new Promise(function (resolve, reject) {
        if (/* 异步操作成功 */) {
            resolve(data);
        } else {
            reject(err);
        }
    })

其中，resolve函数的作用是将promise对象的状态从“未完成”变成“已成功”，即从pending变成resolved，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；reject函数的作用就是将promise对象的状态由“未完成”变成“已失败”，即从pending变成rejected，在异步操作失败时调用，将异步操作的结果（即所报的错误），作为参数传递出去。
可以用then方法分别指定resolved状态和rejected两个状态的回调函数，如下

    const promise = new Promise(function (resolve, reject) {
        if (/* 异步操作成功 */) {
            resolve(data);
        } else {
            reject(err);
        }
    })
    promise.then(function (value) {
        //成功
    }, function (error) {
        //失败
    })

then()方法可以接收两个参数，第一个参数是resolve回调函数，第二个参数是可选的，是rejected回调函数
promise对象相关例子

    let promise = new Promise(function (resolve, reject) {
        console.log("promise");
        resolve();
    });

    promise.then(function () {
        console.log("resolved");
    })
    console.log("hello");

    //promise
    //hello
    //resolved

在上述代码中，promise新建后杯立即执行，最先输出的就是promise，then()方法会在当前所有的同步任务执行之后才会被执行，所以resolved最后被输出。

    function timeOut(ms) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello promise success!!!")
            }, ms);
        })
    }

    timeOut(2000).then((val) => {
        console.log(val);
    })

运行结果会在2秒后输出hello promise success!!!
使用promise封装Ajax案例

    const getJSON = function (url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url);
            xhr.onreadystatechange = handler;
            xhr.responseType = "json";
            xhr.setRequestHeader("Accept", "application/json");
            //发送
            xhr.send();

            function handler() {
                // console.log(this)
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.response.HeWeather6);
                    } else {
                        reject(new Error(this.statusText));
                    }
                }
            }
        })
    }
    //
    // getJSON("https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976")
    //     .then((data) => {
    //         console.log(data);
    //     }, (error) => {
    //         console.log(error);
    //     })


    getJSON("https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976")
        .then((data) => {
            console.log(data);
        }).catch(null, err => {
        console.log(err);
    })

六、总结

1.promise就是一个对象或构造函数
2.promise主要是用于解决异步编程和回调地狱等相关问题。
同学们还是得多看看相关的文件，多深入的了解一下里面的知识点，推荐可以看一下阮一峰的ECMAScript 6 入门文档