Promise方法运用

文章主要涉及关于promise的方法使用，不会涉及太多理论性的东西，简单的讲讲它的方法调用，好废话不多说，直接看代码

本章涉及以下几点

如何创建一个Promise对象
参数讲解
链式调用
catch()捕捉异常
Promise.all()方法讲解
Promise.race() 方法讲解
手动的更改状态 Promise.resolve() | Promise.reject()

如何创建promise对象

创建一个promise对象很简单直接看代码

const p1 = new Promise((resolve,reject) => {
    const value = 'hello';
    resolve(value);
});

像上面这样就简单的创建了一个promise对象

参数讲解

const p1 = new Promise((resolve,reject) => {
    if(true){
            resolve('success')
   }else{
          reject('err')
    }
});

上面的例子中传了两个参数：

reslove 成功的状态
reject 失败的状态

他们两个执行的方法里都可以传一个值，即成功传入和失败传入。下面我们看下链式调用

链式调用

先看一段代码：

const p1 = new Promise((resolve,reject) => {
    const value = 'hello';
    resolve(value);  // 此时触发成功 
       //reject(value);  // 如果是失败 同时我们也传入value
});

p1.then(data => {
    console.log(data);  // hello
    return data+'world';
}, err => {
    console.log(err);   // 返回的是 reject(value) 的值
    return err+'err';
}).then(data => {
    console.log(data); // helloworld 继续上一次data的返回值  如果没有 就返回undefined
},err => {
    console.log(err);       // helloerr 同理 继续返回上一次err的返回值
})

通过代码我们很容易理解它们的作用

catch 捕捉异常

通常我们不会在then方法多传入一个参数而是用catch来捕捉错误的信息继续上面的例子

p1.then(data => {
    console.log(data);
    return data+'world';
}).catch(err => {
    console.log(err);  // hello
    return "reject";
}).then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);  // reject 
})

Promise.all()方法

它传入一个promise对象的列表直接看代码


const arr = [1,2,3,4];

const promiseArr = arr.map(arg => {
    return new Promise((resolve,reject) => {
        if(arg) {
            resolve(arg*2);
        }else{
            reject('no value');
        }
    })
});



Promise.all(promiseArr).then(data => {
    console.log(data);  // [2,4,6,8]
}).catch(err => {
    console.log(err); 
})

Promise.race()方法

同样的它传入的也是promise对象列表不过他们执行顺序是按照谁快谁先输出

const pro1 = new Promise((resolve,reject) => {
    setTimeout(resolve,100,'1');
});

const pro2 = new Promise((resolve,reject) => {
    setTimeout(resolve,200,'2');
});

const pro3 = new Promise((resolve,reject) => {
    setTimeout(resolve,300,'3');
});

const pro4 = new Promise((resolve,reject) => {
    setTimeout(resolve,10,'4');
});


Promise.race([pro4,pro1,pro2,pro3]).then(data => {
    console.log(data);  // 1   输出最快的那个
}).catch(err => {
    console.log(err);
})

两种实例状态

Promise.resolve() | Promise.reject() 两个方法很容易理解即手动去改变它们的状态：

const p_1 = Promise.resolve('success');

p_1.then(data => {
    console.log(data);   // success
})

const p_2 = Promise.reject('err');

p_2.then(data => {
    console.log(data);  
}).catch(err => {
    console.log(err);  // err
})