进阶学习6：JavaScript异步编程——Promise、链式调用、异常处理、静态方法、并行执行、执行时序、宏任务微任务理解

//DEMO1
// Promise 基本演示
const promise = new Promise(function(resolve, reject){
    // 这里属于兑现承诺
    // resolve(100) //承诺达成
    reject('promise rejected')//承诺失败
})

promise.then(function (value) {
    console.log('resolved', value)
},function (error) {
    console.log('rejected', error)
})

console.log('end')

输出结果，可以看到promise里的部分再end输出之后才执行。

4.使用Promise封装ajax函数

首先先把环境搞起来，老师大概默认大家都用过webpack了_(:з」∠)_中间真的搞了我好一会才终于跑成功。

npm install webpack -g

npm install webpack-dev-server -g

npm install webpack-cli@3 -g

npm install html-webpack-plugin

然后添加一个webpack.config.js文件夹，项目结构如下：

webpack.config.js中的内容：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'none',
  stats: 'none',
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

然后api文件夹里面创建一个users.json，用来模拟api数据

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'none',
  stats: 'none',
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

输入webpack-dev-server Promise.js运行项目

具体Promise.js里面写的就是我们封装ajax函数的代码，成功的话返回json里面的内容

//DEMO2
// Promise 使用案例 封装Ajax函数
function ajax (url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.responseType = 'json'
        xhr.onload = function () {
            if(this.status == 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

ajax('/api/users.json').then(function(res){
    console.log(res)
},function(error){
    console.log(error)
})
console.log('END')

运行结果：

假如我们将地址改为一个没有的文件

ajax('/api/nothing.json').then(function(res){
    console.log(res)
},function(error){
    console.log(error)
})
console.log('END')

就会打印一个Error: Not Found

5.Promise链式调用

常见误区

嵌套使用的方式是使用Promise最常见的误区，最好是借助Promise then方法的链式调用特点，尽量保证异步任务扁平化。

理解promise的then方法

//DEMO2
// Promise 使用案例 封装Ajax函数
function ajax (url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.responseType = 'json'
        xhr.onload = function () {
            if(this.status == 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

// ajax('/api/nothing.json').then(function(res){
//     console.log(res)
// },function(error){
//     console.log(error)
// })
console.log('END')

let promise = ajax('/api/users.json')
let promise2 = promise.then(
    function onFulfilled(res){
        console.log('onFulfilled', res)
    },function onRejected(error){
        console.log('onRejected', error)
    }
)
console.log('promise',promise)
console.log('promise2',promise2)
console.log(promise === promise2)

在上面的代码基础上修改看一下，可以看到其实我们的promise2，也就是promise的then方法返回的是一个全新的Promise对象

链式调用样例

每个then方法实际上都是为上一个then方法返回的Promise对象去添加状态明确过后的回调，这些会从前到后依次执行。这样可以用链式调用的方式避免嵌套。

ajax('/api/users.json')
.then(function(value){
    console.log(1)
    return value
})
.then(function(value){
    console.log(2)
    console.log(value)
    return 'foo'
})
.then(function(value){
    console.log(3)    
    console.log(value)

})
.then(function(value){
    console.log(4)
    console.log(value)
})

链式调用总结

promise对象then方法，返回了全新的promise对象。可以再继续调用then方法，如果return的不是promise对象，而是一个值，那么这个值会作为resolve的值传递，如果没有值，默认是undefined
后面的then方法就是在为上一个then返回的Promise注册回调
前面then方法中回调函数的返回值会作为后面then方法回调的参数
如果回调中返回的是Promise，那后面then方法的回调会等待它的结束

6.Promise异常处理

.catch()（推荐）

promise中如果有异常，都会调用reject方法，还可以使用.catch()

使用.catch方法更为常见，因为更加符合链式调用

//DEMO4 Promise异常处理
ajax('/api/users.json').then(
    function onFulfilled(res){
        console.log('onFulfilled', res)
    },function onRejected(error){
        console.log('onRejected', error)
    }
)
//用catch方法更常见，更适合链式调用
//表现上来看，效果是一样的，但是仔细对比差异还是很大的，catch其实是给前面的then指定失败的回调，而不是直接给第一个promise
//而上面那种onRejected只是给第一个promise的异常
ajax('/api/users.json').then(function onFulfilled(value) {
    console.log('onFulfilled',value)
})
.catch(function onRejected (error){
    console.log('onRejected',error)
})

.catch形式和前面then里面的第二个参数的形式，两者异常捕获的区别：

.catch()是对上一个.then()返回的promise进行处理，不过第一个promise的报错也顺延到了catch中，而then的第二个参数形式，只能捕获第一个promise的报错，如果当前then的resolve函数处理中有报错是捕获不到的。

所以.catch是给整个promise链条注册的一个失败回调。推荐使用。

对上面代码稍微做了下修改，在then中添加了异常。

//DEMO4 Promise异常处理
ajax('/api/users.json').then(
    function onFulfilled(res){
        console.log('onFulfilled1', res)
        return ajax('error-url')
    },function onRejected(error){
        console.log('onRejected1', error)
    }
)
//用catch方法更常见，更适合链式调用
//表现上来看，效果是一样的，但是仔细对比差异还是很大的，catch其实是给前面的then指定失败的回调，而不是直接给第一个promise
//而上面那种onRejected只是给第一个promise的异常
ajax('/api/users.json').then(function onFulfilled(value) {
    console.log('onFulfilled2',value)
    return ajax('error-url')
})
.catch(function onRejected (error){
    console.log('onRejected2',error)
})

从打印的结果里面可以看到，第一种方式then中的异常是没有被捕获到的，而第二种方式catch捕获到了

此外，还可以在全局对象上注册一个unhandledrejection事件，处理那些代码中没有被手动捕获的promise异常，当然并不推荐使用。

更合理的是：在代码中明确捕获每一个可能的异常，而不是丢给全局处理

// 浏览器
window.addEventListener('unhandledrejection', event => {
  const { reason, promise } = event
  console.log(reason, promise)

  //reason => Promise 失败原因，一般是一个错误对象
  //promise => 出现异常的Promise对象

  event.preventDefault()
}, false)

// node
process.on('unhandledRejection', (reason, promise) => {
  console.log(reason, promise)

  //reason => Promise 失败原因，一般是一个错误对象
  //promise => 出现异常的Promise对象
})

7.Promise静态方法

Promise.resolve()

//DEMO5 Promise.resolve()
Promise.resolve('foo')

new Promise(function(resolve, reject){
    resolve('foo')
})
//上面两个是相同的
var promise = ajax('/api/users.json')
var promise2 = Promise.resolve(promise)
console.log(promise === promise2) //===>true
// 这也是想等的

Promise.resolve({
    then: function (onFulfilled, onRejected) {
        onFulfilled('foo')
    }
}).then(function(value){
    console.log(value)
})

Promise.reject(new Error('rejected')).catch(function(error){
    console.log(error)
})

输出结果

8.Promise 并行执行

比如一个页面同时请求几个接口

这时候，在我的代码当中再加一个posts.json文件和urls.json作为第二个接口,项目结构如图

posts.json:

[
  {
    "title": "Hello world",
    "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "title": "25 forever",
    "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  }
]

urls.json

{
    "users": "/api/users.json",
    "posts": "/api/posts.json"
}

Promise.all()

//DEMO6 并行
//Promise.all方法接受的是一个数组，数组中每一个元素都是一个Promise对象
var promise = Promise.all([
    ajax('/api/users.json'),
    ajax('/api/posts.json'),
])
//只有里面的Promise.all里面的对象一个个全部完成之后，promise才会完成，才会调用then,如果其中有一个任务失败了，那么promise也失败会调用catch
promise.then(function (values) {
    console.log(values)
}).catch(function (error){
    console.log(error)
})
//返回的结果是两次的结果的array

ajax('/api/urls.json')
  .then(value => {
    const urls = Object.values(value)
    const tasks = urls.map(url => ajax(url))
    return Promise.all(tasks)
  })
  .then(values => {
    console.log(values)
  })

Promise.race()

只会等待第一个结束的任务,其他就失败了

//DEMO7 并行 race()
// Promise.race 实现超时控制
const request = ajax('/api/posts.json')
const timeout = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('timeout')), 500)
})

Promise.race([
  request,
  timeout
])
.then(value => {
  console.log(value)
})
.catch(error => {
  console.log(error)
})

9.Promise执行时序宏任务/微任务

首先我们运行一下以下代码

//DEMO8
// 微任务
console.log('global start')
Promise.resolve()
  .then(() => {
    console.log('promise')
  })
  .then(() => {
    console.log('promise 2')
  })
  .then(() => {
    console.log('promise 3')
  })
console.log('global end')

输出结果应该和之前的理解没有什么问题

于是我们再加上setTimeout

//DEMO8
// 微任务
console.log('global start')
// setTimeout 的回调是 宏任务，进入回调队列排队
setTimeout(() => {
  console.log('setTimeout')
}, 0)
// Promise 的回调是 微任务，本轮调用末尾直接执行
Promise.resolve()
  .then(() => {
    console.log('promise')
  })
  .then(() => {
    console.log('promise 2')
  })
  .then(() => {
    console.log('promise 3')
  })
console.log('global end')

和之前想象中的结果不太一样，按照之前学习的逻辑setTimeout 应该是会在promise之前执行，但是实际上setTimeout在最后。