基本用法

function fetch() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('请求失败');
        }, 1000)
    })
}

fetch()
    .then(
        function (data) {
            //成功的处理
            console.log('请求处理-0');
            console.log(data + "-0");
        },
        function (reason, data) {
            //失败的处理
            console.log('触发异常-2');
            console.log(reason + "-2");
        }
    )

常用写法 resolve()

//做饭
function cook() {
    console.log('开始做饭。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('做饭完毕!');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}

//吃饭
function eat(data) {
    console.log('开始吃饭:' + data);
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}

function wash(data) {
    console.log('开始洗碗:' + data);
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    return p;
}

//正常写法
// cook()
//   .then(function (data) {
//     return eat(data);
//   })
//   .then(function (data) {
//     return wash(data);
//   })
//   .then(function (data) {
//     console.log(data);
//   });

//简化写法
cook()
.then(eat)
.then(wash)
.then(function (data) {
    console.log(data);
});

常用写法 reject()

//做饭
function cook() {
    console.log('开始做饭。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('做饭失败!');
            reject('烧焦的米饭');
        }, 1000);
    });
    return p;
}

//吃饭
function eat(data) {
    console.log('开始吃饭:' + data);
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}

cook()
.then(eat, function (data) {
    console.log(data + '没法吃!');
})

catch() 用法

//做饭
function cook() {
    console.log('开始做饭。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('做饭失败!');
            reject('烧焦的米饭');
        }, 1000);
    });
    return p;
}
//吃饭
function eat(data) {
    console.log('开始吃饭:' + data);
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
cook()
.then(eat)
.catch(function (data) {
    console.log(data + '没法吃!');
});

all() 彼此异步 同时完成才会进行下一步

//切菜
function cutUp() {
    console.log('开始切菜。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('切菜完毕!');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}

//烧水
function boil() {
    console.log('开始烧水。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('烧水完毕!');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}

Promise
.all([cutUp(), boil()])
.then(function (results) {
    console.log("准备工作完毕:");
    console.log(results);
});

race() 彼此异步 只要有一个完成 就会进行下一步

//切菜
function cutUp() {
    console.log('开始切菜。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('切菜完毕!');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}

//烧水
function boil() {
    console.log('开始烧水。');
    var p = new Promise(function (resolve, reject) {        //做一些异步操作
        setTimeout(function () {
            console.log('烧水完毕!');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}

Promise
.race([cutUp(), boil()])
.then(function (results) {
    console.log("准备工作完毕:");
    console.log(results);
});

racey应用:


/**
* racey应用:
* 上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
* 如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
* 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。
*/
<!--function useRace(){-->
function requestImg() {
    var p = new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function () {
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数,用于给请求计时
function timeout() {
    var p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function (results) {
    console.log(results);
})
.catch(function (reason) {
    console.log(reason);
});