介绍

Promise，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大。 promise对象仅有三种状态

• pending（进行中）
• fulfilled（已成功）
• rejected（已失败）

用法

Promise对象是一个构造函数，用来生成Promise实例 const promise = newPromise(function(resolve, reject) {});Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject

• resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
• reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

.then()

1. 接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2. then()返回一个新的Promise实例，所以它可以链式调用
3. 当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4. 状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5. 如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6. 如果返回其他任何值，则会立即执行下一级.then()

new Promise(
    function(resolve,reject){
        setTimeout(()=>{
            resolve('成功！！！')
            // throw new Error("error 发生了")
            // reject('失败了！！')
        },3000)
    }
).then(
    (res)=>{
        console.log('res', res)
        return "001"
    },
    (err)=>{
        console.log('err', err)
    }
).then(res=>{
    console.log('then2', res)
})

异常处理

异常可以通过reject()或者 throw new Error()方式抛出，捕捉异常也有两种方式

• 通过then方法的第二个回调函数，then((res)=>{},(err)=>{错误处理})
• 通过.catch(err=>{})

如果then方法中捕捉了异常，那么catch方法就不会捕捉到，如果then方法没处理，那么catch方法会捕捉到异常

new Promise(
    function(resolve,reject){
        setTimeout(()=>{
            // throw new Error("error 发生了")
            reject('失败了！！')
        },3000)
    }
).then(
    (res)=>{
        console.log('res', res)
    },
    (err)=>{
        // 这里捕获了异常，下面的catch方法不会起作用
        console.log('err', err)
    }
).catch(err=>{
    console.log('catch', res)
})

Promise.all() 和Promise.race()

• Promise.all()全部执行完成后返回，多个任务返回数组
• Promise.race()任意一个执行完成后，就返回

let p1 = new Promise((resolve)=>{
        setTimeout(()=>{
            resolve('任务1执行了')
        },3000)
    })
let p2 = new Promise((resolve)=>{
    setTimeout(()=>{
        resolve('任务2执行了')
    },5000)
})
Promise.all([p1,p2]).then(res =>{
    console.log('all执行完成',res)
})
Promise.race([p1,p2]).then(res =>{
    console.log('race执行完成',res)
})

题外话

vue项目如何关闭代码检查？

在工程根目录创建文件vue.config.js，内容如下：

module.exports = {
    lintOnSave: false
}