Kevin-Blog
1. Promise 的基本用法

  • Promise 一般用于处理异步的回调函数 或 处理回调地狱（函数嵌套函数）

  • 使用 Promise 需要传递 一个函数 且该函数需要接收两个参数 一个参数代表成功 一个参数代表失败

/* Promise 默认写法 */
let p = new Promise((resolve, reject) => {  // resolve, reject 可以用别的命名
    setTimeout(() => {
        console.log('Promise默认写法：' + 1);

/*
            resolve(); 成功状态
            reject(); 失败状态

如果不给成功或者失败 那么 p.then() 不会被执行 永远处于等待状态
         */

        // 当成功或者失败的时候p.then才会被执行
        resolve('成功');  // 成功状态 resolve()可以传参数
        reject('失败状态');  // 失败状态 reject()可以传参数
    }, 1000);
});

p.then(data => {  // 成功的时候执行
    // data 成功状态的返回值
    console.log('Promise默认写法：' + data);
}, data => {  // 失败的时候执行
    // data 失败状态的返回值
    console.log('Promise默认写法：' + data);
});

2. .then()

  • 如果Promise没有执行成功或者失败的函数，那么 .then() 不会被执行 永远处于等待状态

  • .then() 可以接受一个或者两个函数
    • 第一个函数接受Promise成功状态的返回值并且对它进行处理
    • 第二个函数接受Promise失败状态的返回值并且对它进行处理

let p = new Promise((resolve, reject) => {
    resolve('成功');
});

p.then(data => {  // 成功的时候执行
    // data 成功状态的返回值
    console.log(data)
})

let p = new Promise((resolve, reject) => {
    resolve('成功');
    reject('失败');
});

p.then(data => {  // 成功的时候执行
    // data 成功状态的返回值
    console.log(data)
}, data => {  // 失败的时候执行
    // data 失败状态的返回值
    console.log(data)
})

  • .then() 支持链式操作

    • 使用情况一：第一个 .then() 返回的是 Promise对象，那么 第二 .then() 接收的值就是该 Promise对象 成功状态或者失败状态返回的值

let p1 = new Promise((resolve, reject) => {
    resolve('p1的成功');
});

let p2 = new Promise((resolve, reject) => {
    resolve('p2的成功');
    reject('p2的失败')
});

p1.then(data => {  // data 等待 p1 Promise 成功状态返回的值
    console.log(data);
    return p2
}).then(data => {  // data 等待第一个 then 返回的 p2 Promise 成功状态返回的值
    console.log(data)
}, data => {  // data 等待第一个 then 返回的 p2 Promise 失败状态返回的值
    console.log(data)
})

    • 使用情况二：第一个 .then() 返回的不是 Promise对象，而是普通类型的值，那么 第二 .then() 接收得值就是该普通类型的值

let p = new Promise((resolve, reject) => {
    resolve('成功');
});

p.then(data => {  // data 等待 p1 Promise 成功状态返回的值
    console.log(data);  // 成功
    return '普通状态的值'
}).then(data => {  // data 直接接收第一个 then 返回的普通状态的值
    console.log(data);  // '普通状态的值'
})

3. .catch()

  • 捕获失败状态的返回值

  • 可以通过 .catch() 代替在 .then() 中传递第二个函数来捕获失败状态的返回值 

let p = new Promise((resolve, reject) => {
// resolve('成功');
    reject('失败')
});

p.then(data => {
    console.log(data)
}).catch(msg => {
    console.log(msg)
})

4. .finally()

  • 无论Promise的状态是成功还是失败都会执行 .finally()

let p = new Promise((resolve, reject) => {
    resolve('成功');
    reject('失败')
});

p.then(data => {
    console.log(data)
}).catch(msg => {
    console.log(msg)
}).finally(() => {
    console.log('无论Promise的状态是成功还是失败都会执行该方法')
})

5. 当有多个函数要等待执行的写法（异步操作函数嵌套函数）

  • 不使用 Promise

timer(1);

function timer(data) {
    setTimeout(() => {
        console.log('不使用Promise：' + data);
        timer2(data + 1); // 回调函数
    }, 1000)
}

function timer2(data) {
    setTimeout(() => {
        console.log('不使用Promise：' + data);
    }, 1000)
}

  • 使用 Promise

let p2 = function (data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 1000)
    })
};

/*
    .then 是 Promise的一个方法;
    如果有两个以上的then的时候：
        情况一：第一个 then 返回的是 Promise对象 那么 第二 then 接收得值是 Promise对象 成功状态返回的值
        情况二：第一个 then 返回的不是 Promise对象 而是普通类型的值 那么 第二 then 接收得值就是该普通类型的值
*/

p2(1).then(data => {  // data参数是接受成功或者失败状态传过来的值;
    console.log('使用Promise处理异步回调：' + data);
    return p2(data + 1);
}).then(data => {  // data 等待第一个 then 返回的 p2 Promise 成功状态返回的值
    console.log('使用Promise处理异步回调：' + data);
    return data + 1;
}).then(data => {  // data 直接接收第二个 then 返回的普通状态的值
    console.log(data);
})

6. Promise.all

  • 语法：Promise.all([Promise对象1, Promise对象2]).then();

  • 说明：
    • 只有当所有Promise对象执行完, Promise对象都为成功或者失败状态的时候then才会执行，如果有一个没有状态then都不会执行
    • 所有Promise会同时执行
    • 如果其中有一个Promise对象是失败状态那么.then()会执行失败状态的代码
    • 如果Promise对象的成功状态都有值返回出去的话,就会以数组的形式返回出去给.then()接收

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1);
        resolve('成功1');
    }, 1000)
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2);
        resolve('成功2');
    }, 2000)
});

Promise.all([p1, p2]).then(data => {  // 成功状态
    // data 存储着所有成功状态返回的值
    console.log(data);  // ["成功1", "成功2"]
}, data => {  // 失败状态
    console.log('失败');
});


← Promise-Ajax的嵌套例子 →