ES6语法之 Promise

概念：Promise是为了解决异步操作的容器，是一个构造函数，通过new关键字生成实例，接收一个成功和一个失败的回调函数作为参数。

const promise = new Promise(function(resolve, reject) {
    if (/* 异步操作成功 */){
    resolve(value);//成功回调函数
  } else {
    reject(error);//失败回调函数
  }
});

特点：

1.新建实例后就会立即执行；

var promise = new Promise(()=>{
    console.log(111);//新建后立即打印出111
})

2.promise实例生成后，可通过promise.then方法分别调用resolved状态和rejected状态的回调函数，promise.then返回的是一个新的promise实例，因此可以采用链式写法；

    var promise = new Promise(function (resolved,rejected) {
        setTimeout(function (res) {//res就是setTimeout的第三个参数
            resolved(res);//成功之后把res塞给回调函数
        },2000,'888');
    })
    promise.then(function (res) {
        console.log(res)//888
    })

3.resolve函数的作用是为了让 promise 对象从未完成变成成功（pending=>resolved），reject函数的作用是为了让 Promise 对象从未完成变成失败（pending=>failed）;

4.对象的状态不受外界影响；

5.一旦状态改变，就不会再变。

优点：

1.将异步操作以同步操作的形式表现出来，避免了层层嵌套；

2.提供统一的接口，控制异步操作更加容易。

3.解决回调地狱。

缺点：

1.Promise 一旦新建，就没法停止；

2.如果不设置回调函数，Promise内部抛出的错误和成功之后的参数，无法反应到外部。

使用：

//用法1:执行顺序
let promise = new Promise(function(resolve, reject) {
  console.log('1');
  resolve();
});
promise.then(function() {
  console.log('2');
});
console.log('3');
//打印顺序
1 //定义promise之后立即执行
3 //同步执行
2 //异步执行

//用法2:模拟Ajax请求
    ajax({
        url:url,
        type:'GET',
        dataType:'json',
        data:{},
        success:(res)=>{
           console.log(res)
        },
        error:(res)=>{
            console.log(res)
        }
    });
    function ajax(data) {
        let promise = new Promise(function (resolve,reject) {
            const client = new XMLHttpRequest();
            client.open(data.type, data.url);
            client.onreadystatechange = function () {
                if (this.readyState !== 4) {
                    return;
                }
                if(this.status == 200){
                    resolve(this.response);
                }else {
                    reject(new Error(this.statusText))
                }
            };
            client.responseType = data.dataType;
            client.send();
        });
        promise.then(function (res) {
            data.success(res);
        },function (res) {
            data.error(res);
        })
    }

猜你喜欢