promise 和async /await

封装一个ajax
function ajax (options){
  //先准备一个默认值
    var defInfo={
      url: ' ',//地址不需要默认值
      type='get',//请求方式默认为get
      async: false,//默认是异步
      data:' ',//参数没有默认值
      dataType:'string',//默认不需要执行json.parse
      success(){}//默认是一个函数
    }
//先来判断一下有没有传递url 如果没有,直接抛出异常
if(!options.url){
   throw new Error('url 必须传递')
}
//有了url以后 我们就把用户传递的参数和我们的默认数据合并
  for(let key in options){
      defInfo [key] = options[key]
    }
}

Promise 是一个ES6的语法 是用来专门解决异步回调地狱的问题

什么是回调函数?
回调函数就是把函数A当作参数传递到函数B中,在函数B中以形参的方式进行调用

function a(callback){
  callback()
}
    function b (){
  console.log('我是函数B')
}
a(b)//b的实参 值 赋值 形参 callback

promise 就是一个语法
我们的每一个异步事件 在执行的时候 都会有三个状态 执行中/成功/失败
因为它包含了成功的回调函数 我们就可以使用promise来解决多个ajax发送问题

new Promise(function(resolve, reject){
ajax({
    url:'第一个请求',
    success(res){
      resolve(res)
      }
  }).then(function(res){
        //准备发送第二个请求
return new Promise(function(resolve, reject){
    ajax({
    url:'第二个请求',
    data: {a: res.a, b:  res.b},
    success(res){
      resolve(res)
      }
    })
  })
}).then(function(res){
     ajax({
        url: '第三个请求',
        data: {a: res.a, b: res.b },
         success (res) {
           console.log(res)
       }
    })
 })

这个时候 我们的代码就改观了很多 方便维护了 但还远远不够 还需要更加简化代码
需要用到一个 ES7 的语法 async await 这个语法是回调地狱的终极解决方案
语法

async function fn (){
    const res1 = await promise对象1
    const res2 = await promise对象2
    const res3 = await promise对象3
}
//await promise对象1 等着promise对象1 内部的异步操作执行完以后再去执行 第二行代码 await promise对象2
//promise 对象1 的异步操作完成以后 才会执行promise2 , promise2执行完以后才会去执行promise3
这是一个特殊的函数方式
可以把异步代码写的看起来像同步代码
只要是一个 promiser 对象,那么我们就可以使用 async/await 来书写
async function fn() {
  const res =  await new Promise(function (resolve, reject) {
    ajax({
      url: '第一个地址',
      success (res) {
        resolve(res)
      }
    })
  })
  
  // res 就可以得到请求的结果
  const res2 = await new Promise(function (resolve, reject) {
    ajax({
      url: '第二个地址',
      data: { a: res.a, b: res.b },
      success (res) {
        resolve(res)
      }
    })
  })
  
  const res3 = await new Promise(function (resolve, reject) {
    ajax({
      url: '第三个地址',
      data: { a: res2.a, b: res2.b },
      success (res) {
        resolve(res)
      }
    })
  })
  
  // res3 就是我们要的结果
  console.log(res3)
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容