数据库|ES6的Promise链式异步编程方法数据库|vue

一.什么是Promise Promise是异步编程的一种解决方案
那什么时候我们会来处理异步事件呢？

一种很常见的场景就是网络请求
我们封装一个网络请求的函数，但网络请求往往不能立即拿到结果，因此我们会开启一个异步编程，它不会影响页面的继续加载
而我们往往会传入另外一个函数，在数据请求成功时，将数据通过此函数回调。
所以如果只是一个简单的网络请求，那么这种方案不会带来太多麻烦
但是当网络请求非常复杂时，就会出现回调地狱（多层回调），代码难看且不容易维护
而Promise可以以一种优雅的方式解决回调地狱的问题

二.什么时候会用到Promise？一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
在执行传入的回调函数时，会传入两个参数resolve和reject，而它们本身又是函数
基本使用过程：

new Promise((resolve,reject) => { setTimeOut(() => { // 一个网络请求 //成功时调用resolve resolve('Hello world') //失败时调用reject reject('error message') },1000) }).then((data) = > { // 处理代码，与resolve对应 console.log(data) }).catch((err) => { // 处理代码，与reject对应 console.log(err) })

【数据库|ES6的Promise链式异步编程方法】Promise是一个链式编程，它将网络请求和处理代码分离
三.Promise三种状态首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise
异步操作之后会出现三种状态

pending: 等待状态，比如正在进行网络请求，或者定时器没有到时间
fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

四.Promise的另外一种处理形式将catch函数内部的内容也放在then函数中，即then函数中包括catch

new Promise((resolve,reject) => { setTimeOut(() => { resolve('Hello vuejs') reject('error message') },1000) }).then(data => { console.log(data) },err => { console.log(err) })

五.Promise的链式调用将每一步处理都放在一个新的Promise里
设计案例：
1.提出网络请求，返回aaa
2.处理 aaa+‘111’

new Promise((resolve,reject) => { setTimeOut(() => { resolve('aaa') }，1000) }).then(res => { console.log(res,'每一层是10层代码处理') // 对结果进行第一次处理 return new Promise((resolve) => { resolve(res+'111') }) }).then(res => { console.log(res,'第二层的10层代码回调') })

文章图片

可以简写为：return Promise.resolve(res+'111'),继而再次简化为return res+'111' 两种方法
而对于reject也可以简写为：return Promise.reject('error'),仅一种简写方法
六.Promise的all使用方法如果一个异步操作，需要两个以上的请求才能完成，此时我们考虑promise.all方法

promise.all([ // promise.all后面是数组 new Promise((resolve,reject) => { setTimeOut(() => { resolve(data1) },2000) }), new Promise((resolve,reject) => { setTimeOut(() => { resolve(data2) },1000) }) ]).then(results => { //results为数组 console.log(results) })