javascript异步---promise和async await

目录

一.Promise

1.promise的理解

2.promise的串联使用

二. await async

---

一.Promise

1.promise的理解

promise是一个异步执行的「包装形式」，并不是说放入promise中的代码会自动异步执行

只是说promise在构造时对其中的异步操作有一些成功和失败的回调 方便我们使用。

先看个例子和打印结果（以下测试均是在Chrome 浏览器console面板中完成）

var promise = new Promise((resolve,reject)=>{
    console.log('start')
    setTimeout(()=>{
        console.log('2')
        resolve('resolve参数')
        console.log("2秒后")
    },2000)
})
console.log('init--')
promise.then((param)=>{    
    console.log(param)
})
console.log('end')

打印结果：

结果分析：

1. promise对象在构造时传入了一个函参，「start」先于「init---」执行 说明promise对象在新建后就开始了执行参数函数中的内容
2. 「init--」后打印「end」说明在promise在执行异步函数的同事，promise外的函数是同时同步向下执行
3. 打印「2」和「2秒后」表示promise中的异步执行完毕。此时应该隔了2秒。同时调用了resolve函数标记promise的状态。
4. 打印「resolve参数」说明then函数中接收到了resolve的参数

上面的例子是调用了promise构造函数中的resolve，我们看一下调用reject会怎样。

var promise = new Promise((resolve,reject)=>{
    console.log('start')
    setTimeout(()=>{
        console.log('2')
        reject('reject参数')
        console.log("2秒后")
    },2000)
})
console.log('init--')
promise.then((param)=>{    
    console.log(param)
}).catch((error)=>{
    console.log('error--->',error)
})
console.log('end')

打印结果：

结果分析：

1.2.3条同第一个例子的结果相同，不再赘述。重点看「 error---> ..... 」这一行。

从代码中可以看出，打印error的函数是在promise的catch的函数中被调用。这说明

当调用了reject后，会在catch中接收到reject的参数 , 此时then函数就不会再执行。

所以在promise的解释页是这样说明的

Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。

起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

• then：用于处理 Promise 成功状态的回调函数。
• catch：用于处理 Promise 失败状态的回调函数。
• finally：无论 Promise 是成功还是失败，都会执行的回调函数。

我们平常用的axios网络请求库中，axios.get() axios.post()等网络请求返回的就是一个promise对象。当网络请求成功时会调用该promise中的构造函数中的resolve方法，有错误时则调用reject方法。

所以平常我们也可以这样写：

axios.get(url)
.then((res)=>{//请求成功的返回
})
.catch((neterror)=>{//有网络错误时的情况
})

2.promise的串联使用

现实情况中经常会遇到串联使用异步的情况。比如网络请求中根据某个请求获取到id后在根据该id去获取详情，这时候就需要用到了promise串联使用。

模式是

promise1.then(()=>{
    return promise2
})
.then(()=>{
    return promise3
})
.then(()=>{
    execute()
})

千万不要忘记return！！！

还是用例子来看一下：

var promise = new Promise((resolve,reject)=>{
    console.log('start')
    setTimeout(()=>{
        console.log('2')
        resolve('resolve参数')
        console.log("2秒后")
    },2000)
})
var promise2 = new Promise((resolve,reject)=>{
    console.log('start2')
    setTimeout(()=>{
        resolve('resolve参数2')
    },1000)
})
console.log('init--')
promise.then((param)=>{    
    console.log(param)
    return promise2
}).then((param)=>{
    console.log(param)
})

结果分析：

promise间隔2秒回调，promise2间隔1秒回调，应该是promise2早返回，
但是因为它是串联在promise后面的所以依然等待promise执行完之后再进行了调用。
这就是then串联的作用。 

二 . await async

除了用then这种方式进行串联外，还有一种也是可以用await关键字将多个Promise对象串联起来。

await new Promise((resolve,reject)=>{
    console.log('start')
    setTimeout(()=>{
        resolve('resolve')
        console.log("end")
    },2000)
})
new Promise((resolve,reject)=>{
    console.log('start2')
    setTimeout(()=>{
        console.log("end2")
    },1000)
})

从「 start2 」的位置可以看出 ，第二个promise并不是一创建就执行了。而是等待第一个promise执行完成后才进行的第二个promise.