【JavaScript】异步编程：Promise基础

ゞ浴缸里的玫瑰 2023-07-23 12:56 53阅读 0赞

### 目录 ###

*   *   *   *  1. Promise简介
             *  2. 基本用法
             *  3. then 方法
             *  4. catch 方法
             *  5. all 方法
             *  6. race 方法

#### 1. Promise简介 ####

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步变成的困境，避免出现回调地狱，嵌套层级得到改善。

#### 2. 基本用法 ####

*  Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
 *  Promise构造函数接受一个函数作为参数，该函数的两个参数分别是`resolve`和`reject`。

#### 3. then 方法 ####

当Promise执行的内容符合成功条件时，调用`resolve`函数，失败就调用`reject`函数。Promise创建完了，那我们该如何调用呢？

promise.then(function(value) { 
      // success
    }, function(error) { 
      // failure
    });

`then`方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为`resolved`时调用，第二个回调函数是Promise对象的状态变为`rejected`时调用。其中第二个参数可以省略。

`then`方法返回的是一个新的Promise实例（不是原来那个Promise实例）。因此可以采用链式写法，即`then`方法后面再调用另一个then方法。  
当我们要写有顺序的异步事件时，需要串行时，可以这样写：

let promise = new Promise((resolve,reject)=>{ 
        ajax('first').success(function(res){ 
            resolve(res);
        })
    })
    promise.then(res=>{ 
        return new Promise((resovle,reject)=>{ 
            ajax('second').success(function(res){ 
                resolve(res)
            })
        })
    }).then(res=>{ 
        return new Promise((resovle,reject)=>{ 
            ajax('second').success(function(res){ 
                resolve(res)
            })
        })
    }).then(res=>{ 
        
    })

那当我们要写的事件没有顺序或者关系时，还如何写呢？我们可以使用`all` 方法来解决。

#### 4. catch 方法 ####

*  Promise对象除了有then方法，还有一个catch方法，该方法相当于`then`方法的第二个参数，指向`reject`的回调函数。
 *  不过`catch`方法还有一个作用，就是在执行`resolve`回调函数时，如果出现错误，抛出异常，不会停止运行，而是进入`catch`方法中。

p.then((data) => { 
         console.log('resolved',data);
    },(err) => { 
         console.log('rejected',err);
         }
    ); 
    
    p.then((data) => { 
        console.log('resolved',data);
    }).catch((err) => { 
        console.log('rejected',err);
    });

#### 5. all 方法 ####

`all`方法可以帮我们来完成并行任务， 它接收一个数组，数组的每一项都是一个`promise`对象。当数组中所有的`promise`的状态都达到`resolved`的时候，`all`方法的状态就会变成`resolved`，如果有一个状态变成了`rejected`，那么`all`方法的状态就会变成`rejected`。

javascript
    let promise1 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(1);
    	},2000)
    });
    let promise2 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(2);
    	},1000)
    });
    let promise3 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(3);
    	},3000)
    });
    Promise.all([promise1,promise2,promise3]).then(res=>{ 
        console.log(res);
        //结果为：[1,2,3] 
    })

调用`all`方法时的结果成功的时候是回调函数的参数也是一个数组，这个数组按顺序保存着每一个promise对象`resolve`执行时的值。

#### 6. race 方法 ####

`race`方法和`all`一样，接受的参数是一个每项都是`promise`的数组，但是与`all`不同的是，当最先执行完的事件执行完之后，就直接返回该`promise`对象的值。  
如果第一个`promise`对象状态变成`resolved`，那自身的状态变成了`resolved`；反之第一个`promise`变成`rejected`，那自身状态就会变成`rejected`。

那么`race`方法有什么实际作用呢？当我们我们要做一件事，超过多长时间就不做了，可以用这个方法来解决：

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{ })