Promise用法介绍

1、promise特点

Promise，简单来说就是一个容器，里面保存着一个异步事件。在es6中被正式加入。

Promise最大的好处就是将异步处理的执行代码和结果处理代码清晰的分离。

Promise有三种状态pending(进行中)、fulfilled(已成功)、rejected（已失败）

2、基本用法

promise本质是一个对象

var promise = new Promise(function (resolve,reject) {
    //code
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(value)
    }
});

resolve:将Promise对象的状态从pending变为resolve,将异步操作成功的结果作为参数传递出去。

reject:将Promise对象的状态从pending变为rejected,在异步操作失败的时候调用，并将异步操作报出错误，作为参数传递出去。

then方法用来指定resolved和reject状态的回调函数，当Promise的状态改变的时候，就会调用then方法（里面的参数由resolve或者reject传递过来）

3、Promise对ajax请求进行包装

function  ajax(url,method) {
    return new Promise(function (resovle,reject) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        } else {
            request = new ActiveXObject('Microsoft.XMLHTTP');
        }
        request.onreadystatechange = function () {
            if(request.readyState == 4){//请求完成
                if(request.status == 200){
                    resovle(request.responseText);
                }else{
                    reject(request.status);
                }
            }
        }
        request.open(method,url);
        request.send();
    });
}
ajax("content.json","GET").then(function (resolve) {
    console.log(resolve);
}).catch(function (reject) {
    console.log(reject);
});

4.all()方法

扫描二维码关注公众号，回复： 459309 查看本文章

Promise的all()方法可以同时进行多个请求，并将所有请求的结果放在一个数组中

var p1 = new Promise(function (resolve,reject) {
    setTimeout(resolve,500,"p1");
});
var p2 = new Promise(function (resolve,reject) {
    setTimeout(resolve,600,"p2");
})
//all并行执行所有的promise请求，并将请求返回的结果返回一个数组
Promise.all([p1,p2]).then(function (results) {
    console.log(results);
})

5.race()方法

race(）方法也是用来执行多个请求，但只返回第一个请求的结果

var p1 = new Promise(function (resolve,reject) {
    setTimeout(resolve,500,"p1");
});
var p2 = new Promise(function (resolve,reject) {
    setTimeout(resolve,600,"p2");
})

//race执行所有的promise请求，但只返回最快的，后面的请求也会继续执行，但结果会被丢弃
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

6.finally()方法

finally()请求成功或者失败都会调用。

1、promise特点

2、基本用法

猜你喜欢