ES6 Promise对象

今天来给大家介绍的，是ES6中的新特性，也是前端开发中非常重要的一个特性——异步编程。异步编程想必大家早有耳闻，在js中最简单的异步方法是使用定时器做一个延迟操作。
而在ES6中引入了一个新的对象 Promise，它能够用来封装异步操作代码，并根据情况返回异步的状态，也是我们步入 Ajax的一个重要门槛。

同步和异步的概念

在介绍前，我们再来简单了解下同步和异步的概念：

1. 同步：只有前一个任务执行完毕，才会继续执行下一个任务，代码从上至下依次执行；
2. 异步：不进入主线程，进入任务队列，只有任务队列通知主线程调用时，某个异步任务才会执行，该任务才会进入主线程，代码在需要的时候才会使用。

是不是对同步异步有一定的了解了？那么就让我们正式步入 Promise对象的学习吧。

Promise 对象

Promise 是异步编程的一种解决方法

1. 功能：编写异步代码，使其同步执行
2. 好处：减少代码的维护力度，增加可读性
3. 语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败状态。

Promise 状态

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

实例化 Promise对象时，接收一个函数形式的参数，参数有两个形参，规范命名为：resolve（决定）和 reject（拒绝），这两个参数将决定 Promise的状态。

const pro = new Promise((resolve,reject)=>{
    /*常用于封装异步的操作*/
    setTimeout(()=>{
        /*异步中可以用来获取用户数据，数据库数据之类的操作*/
        let data = '数据库中用户的数据';
        
        // 再执行完需要的操作后，可以调用 resolve和 reject 来改变Promise 的状态
        resolve(data); // resolve改变状态为成功
        
        let err = '数据读取失败';
        reject(err); // reject改变状态为失败
    },1000);
})

Promise 方法

then方法 Promise.prototype.then

• Promise 对象调用then方法，对成功或失败的状态做一个处理

• then 方法接收两个参数，两个参数都是函数的形式，且函数都有一个形参

// 调用Promise 对象的 then方法
Promise.then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
});

• 第一个函数用于接收成功时的状态，大多为成功返回的用户数据，形参规范命名为 value （值）；
• 第二个函数用于接收失败时的状态，获取失败状态的原因，形参规范命名为 reason （原因）。
• then 方法的返回值同样是一个Promise对象，对象的状态由回调函数的执行结果决定

const result = Promise.then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
});

console.log(result);

• 如果回调函数中返回的结果是 非Promise 类型的值，状态为成功，返回值为对象的成功的值

const result = Promise.then((value)=>{
    console.log(value);
    
    return 'Hello resolve';
},(reason)=>{
    console.log(reason);
});

console.log(result);

• 如果回调函数没有返回值，状态也为成功，默认值为 undefined
• 如果回调函数中返回的结果是 Promise 类型的值，内部 Promise 的状态就决定 then 方法返回的状态

const result = Promise.then((value)=>{
    console.log(value);
    
    return new Promise((resolve,reject)=>{
        /*Promise 虽然大多用于异步操作，但是同样可以使用同步操作*/
        resolve('成功！');
        // reject('error');
});
},(reason)=>{
    console.log(reason);
});

console.log(result);

• 抛出错误时，返回的状态也是失败，值为抛出错误的值

const result = Promise.then((value)=>{
    throw new Error("出错了！");
});
},(reason)=>{
    console.log(reason);
});

console.log(result);

• then 方法可以进行链式调用，同时进行多个异步，杜绝回调地狱

回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

常见表现为为了实现某一个操作，而编写了多个回调函数。

Promise.then(value =>{
    
},reason =>{
    
}).then(value =>{
    
},reason =>{
    
}).then(value =>{
    
},reason =>{
    
});
/*then 方法可以只指定一个回调*/

catch方法 Promise.prototype.catch

用于指定 Promise 失败状态时的回调

const Pro = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // 设置Promise对象的状态为失败，并且设置失败的值
        reject("出错了！");
    },1000);
});

// 通过then方法来对Promise对象的状态做一个处理
Pro.then((value)=>{},(reason)=>{
   console.log(reason); 
});

// 通过catch方法来对Promise的失败状态做一个处理
Pro.catch((reason)=>{
    console.log(reason);
});

1. catch方法可以看作then方法的语法糖，只进行错误时的操作
2. 不使用catch方法，then方法不指定第一个参数也能达到同样的效果

简单来说Promise 的内容就这些了，当然如果有什么是我在文章中没有提到的，欢迎各位指正。
这里是万物之恋，我们下次再见了！