从 回调地狱 到神奇的 promise

1.为什么会产生回调地狱
当我们需要在异步的末尾做一些事情的时候,我们就会用到回调函数。当回调函数嵌套过多的时候,我们的代码就没有可阅读性和可维护性,这种情况我们就称之为回调地狱
2.promise
这个promise是es6的语法,是异步编程的一种解决方法,比传统的解决方法更强加,更合理。
3.promis的语法

let p1 = new Promise(function (resolve, reject) {})
	p1.then(function () {
    // 这个函数就是当你的 Promise 里面书写 resolve() 的时候,就会调用了
    console.log(123)
    })

这里的2个参数 : 如果成功了,就是 resolve,成功之后执行函数p1.then()
如果失败了,就是 reject,失败之后执行的函数p1.catch()
4.promise的高级应用
当你在这个 function 里面 return 一个新的 promise 对象的时候
可以继续.then() ,以ajax的请求计算sum为例:

new Promise(function (resolve) {
      ajax({
        url: './ajax1.php',
        data: {
          a: 100,
          b: 200
        },
        dataType: 'json',
        success: function (result) {
          resolve(result)
        }
      })
    })
    .then(function (res) {
      console.log(res) // 第一次请求的结果

      return new Promise(function (resolve) {
        ajax({
          url: './ajax2.php',
          data: res,
          dataType: 'json',
          success: function (result) {
            resolve(result)
          }
        })
      })
    })
    .then(function (res) {
      console.log(res)
      }

5.回调地狱的终极解决办法
就是想一个办法把异步代码写的 看起来像 同步代码
会用到es7的语法:async/await 函数

语法:
1> async 是一个关键字 要写在函数的前面
async function fn() {}
let fn = async () => {}
2> await 也是一个关键字 要写在函数的里面
await 关键字有一个作用,就是可以把 promise 本该再 then 里面接受的结果
直接再 await 前面定义一个变量来接受;
await 会把后面那个 promise 对象当作一个等待的对象;
await 后面行的代码会等到这个 promise 执行完毕以后再继续;

	async function fn() {
    console.log('start')
    
    let res = await new Promise(function (resolve, reject) {
         setTimeout(function () {
           resolve(123)
        }, 1000)
       })

       console.log(res)

      console.log('end')
     }

     fn()

上面的这个代码会先打印 strat,再打印end ,最后打印 res

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值