浅淡Promise

Promise我认为出来的主要目的是为了解决回调地狱 

回调地狱

回调函数嵌套回调函数，如果嵌套的层级过多，称为回调地狱。

注意：

• 回调地狱：本身对于实现代码功能是没有任何问题的。

• 缺点是： ==可读性差，后期不好维护==。

回调地狱写法

axios.get('接口1')
  .then(res => {
     // res.data就是后端响应的数据   
     axios.get('接口2')
       .then(res => {
           // res.data就是后端响应的数据
           axios.get('接口3')
             .then(res => {
                  // res.data就是后端响应的数据
                   axios.get('接口4')
                     .then(res => {
                          // res.data就是后端响应的数据
                      })
              })
        })
  })

Promise

• Promise 是es6新增的构造函数，主要用于管理 “ 异步操作 ”。

• Promise一共有三种状态： 进行中、已成功、已失败

• 状态变化有两种情况，一旦变化完成，就不可逆，状态就确定了：

  • 进行中 -》已成功

  • 进行中 -》已失败 

        基本语法 

// 创建实例对象
const p = new Promise(( resolve,  reject ) => {
    /*
      new去调用Promise的时候，会自动往函数中传入两个参数
      第一个参数传给resolve, 是一个函数。如果想要让Promise的状态从 进行中 -》 已成功，就调用 resolve()
      第二个参数传给reject，是一个函数。如果想要让Promise的状态从 进行中 -》 已失败，就调用 reject()
    */
    
    if ( 成功 ) {
        // 让状态从 进行中 -》 成功
        resolve('成功')
    } else {
        // 让状态从 进行中 -》 失败
        reject('错误信息')
    }
})


p.then( (data) => {
    //  如果上一步调用了 resolve() 就会触发then的回调函数， 接收传入的数据
} ).catch( (err) => {
    // 如果上一步调用了 reject（） 就会触发catch的回调函数， 接收传入的错误信息
} )

Promise解决回调地狱

new Promise((resolve) => {
    axios.get('接口1').then(res => {
       resolve(res.data) // 状态切换 进行中 -》 成功
    })
})
 .then(data => { // 上一步调用 resolve() 就会触发then中的回调函数 把数据传进来
    return new Promise(resolve => {
       axios.get('接口2?带上第一个接口参数').then(res => {
          resolve(res.data) // 状态切换 进行中 -》 成功
       })
    })
 })
 .then(data => {
    // 如果还有下一个then 必须返回一个Promise的实例对象 才能调用 resolve() 把数据传给下一个then
    return new Promise(resolve => {
        axios.get('接口3？带上第二个接口的参数').then(res => {
        	resolve(res.data)
    	})
    })
 })
 .then(data => {
    axios.get('接口4？带上第三个接口的参数').then(res => {
        console.log(res.data)
    })
})

async和await

        基本语法

# 1. async关键字，声明函数内部有异步操作
async function 函数名() 
}

const 变量 = async function () {
}

const 变量 = async () => {
}

# await关键字，用于等待一个Promise实例对象， 只能在async函数内部使用。
async function 函数名() 
   let 变量 = await Promise实例对象;

	# await的作用：
       1. 等待后面Promise实例对象状态切换完毕。
       2. 如果后面的Promise调用了resolve()，那么传入的结果，可以在左侧声明变量接收。
       3. await必须等到结果，后续的代码才能执行。
}

        使用例子

async function 函数名() {
   let res = await new Promise((resolve, reject) => {
       console.log('111')
       resolve('我是数据') // 把Promise状态切换为成功， 把数据给res
   })
   console.log(res)
    
   console.log('3333')
}

函数名()