1.?回调函数?callback

??+?一种封装代码的手段

??+?什么是?callback?,?概念

????=>?把?函数A?当做?实参?传递到?函数B?内部

????=>?在?函数B?内部以?形参?的方式?调用?函数A

????=>?我们管这个行为叫做?回调函数

????=>?我们说?函数A?是?函数B?的回调函数
function A() {
  console.log('我是 A 函数')
}

function B(fn) {
  // 此时 fn 形参接受的是书写在 B() 的时候, () 内部的内容 : A
  // 此时 fn 形参接受的就是全局 函数 A 的地址
  // 此时 fn 形参和全局变量 A 操作一个函数空间
  console.log('我是 B 函数')
  // 调用 fn 其实就是在调用执行全局的 A 函数
  fn()
}
// 调用 B 函数
// A 是一个保存 函数的地址
// 把 函数 A 这个地址当做实参传递给了 B 函数内部的 fn 形参
B(A)
// 函数A?是?函数B?的回调函数
??+?为什么需要?callback?回调函数

??+?如果从头到尾都是同步代码,?不需要回调函数

????=>?当你在 封装代码 的时候

????=>?并且代码内有异步的时候

????=>?并且需要在?异步的?末尾?做一些事情的时候

????=>?使用?callback

解释:?为什么异步的末尾封装要使用?callback

??+?因为?JS?的单线程

??+?同一个时间点只能做一个事情

??+?主要:?异步的结束时间不确定

??+?例子:?外卖

????=>?一个外卖员同一个时间点只能做一件事情

????=>?如果你希望多带一双筷子

????=>?方案1:?等到外卖员刚好到达店里的时候,?给他打电话

????=>?方案2:?在点餐的时候给一个备注

????回调函数的缺点:

??+?回调地狱

??+?当回调嵌套回调的时候,?代码的阅读和可维护性不高

??解决回调地狱的问题:

??+?Promise?来解决回调地狱

??+?分析:

????=>?Promise?是来解决回调地狱

????=>?回调地狱,?是因为回调函数嵌套过多

????=>?回调函数,?为了解决在异步末尾做一些事情的封装

????=>?Promise?就是一种优雅的对于异步代码封装的方案

// 为什么需要回调函数
// 封装一段代码
// 例子 : 外卖公司做好的事情
function waimai(beizhu) {
  // 获取一个 1000 ~ 6000 的随机整数
  const time = 1000 * Math.round(Math.random() * 5 + 1)
  console.log(' 在路上 ' + time)
  // 我们使用 setTimeout 模拟一个网络环境请求
  setTimeout(() => {
    console.log('到达店里了, 拿到外卖')
    // 直接把我需要执行的代码放在这个位置
    // 那么这个封装就没有意义了
    // 就需要用到回调函数了
    // 因为这个位置是异步的末尾了
    // 这个位置调用 beizhu 就是在异步的末尾调用
    // 例 : 不管什么时候到了店里
    // 拿到外卖以后, 把 备注 的内容执行一下
    beizhu()
  }, time)
}
// 用户的需求: 想多拿一双筷子
waimai(function () { console.log('多拿一双筷子') })
// 用户的需求: 想多拿点辣椒
waimai(function () { console.log('多拿点辣椒') })

2.?回调地狱

??+?一种使用回调函数封装的代码时候的情况

??+?回调函数的使用是有 函数嵌套 在里面的

??+?当你大量使用回调函数封装的代码的时候,?会出现 结构紊乱

????=>?不利于代码的阅读和维护

??+?为了解决回调地狱

????=>?ES6?的语法内出现了一个新的语法,?叫做?Promise

????=>?为了把?异步代码?封装变成?Promise?语法的封装

????=>?不在使用?回调函数?来封装?异步代码了

????=>?本质: 用来?封装异步代码?的

?实现需求?:

1.?发送一个请求,?请求一个接口

??=>?等到响应回来以后

??=>?把内容打印在控制台

2.?发送第二个请求,?请求第二个接口

??=>?要求必须要在第一个请求结束以后,?打印完毕以后再次发送请求

??=>?把响应内容打印在控制台

3.?发送第三个请求,?请求第三个接口

??=>?要求,?必须要在第二个请求结束以后,?打印完毕以后再次发送请求

??=>?把响应内容打印在控制台

+?问题1:?在什么位置发送第二个请求??

=>?ajax?是同步还是异步,?异步的

=>?打开页面,?会马上把第一个请求发送出去

=>?第一个请求还没有回来的时候,?继续发送了第二个请求

=>?因为第一个请求的?success?一定会在请求结束后才执行

=>?我需要把第二个请求的代码放在第一个请求的?success?内部

问题:?代码的阅读和可维护性不高

+?代码嵌套过多
// 实现需求 1 :
ajax({
  url: 'http://localhost:8888/test/first',
  success: function (res) {
    console.log('第一次请求的结果')
    console.log(res)
    // 实现需求 2 :
	  // 第一个请求结束以后, 才会执行这个位置的代码
	  // 这个时候才会把第二个请求发送出去
    ajax({
      url: 'http://localhost:8888/test/second',
      dataType: 'json',
      success: function (res) {
        console.log('第二次请求的结果')
        console.log(res)
        // 实现需求 3 :
		    // 因为第二个请求结束以后, 才会执行这个位置的代码
		    // 这个时候才会把第三个请求发送出去
        ajax({
          url: 'http://localhost:8888/test/third',
          data: 'name=Jack&age=18',
          dataType: 'json',
          success: function (res) {
            console.log('第三次请求的结果')
            console.log(res)
          }
        })
      }
    })
  }
})

3.?认识?Promise

+?是一个?ES6?出现的语法

+?Promise?也是一个?JS?内置的 构造函数

promise - 承诺 :
+ 承诺的状态有多少个 ?
? => 继续(持续执行过程中)
? => 成功
? => 失败
+ 承诺状态之间的转换 : 只能转换一次
? => 要么是继续转换成成功
? => 要么是继续转换成失败
+ Promise 也有三个状态
? => 继续: pending
? => 成功: fulfilled
? => 失败: rejected?
const p = new Promise(function (resolve, reject) {
  // ...
  // ...
})
p.then(function () {
  // ...
})
p.catch(function () {
  // ...
})
Promise?的基础语法 :

??=>?const?p?=?new?Promise(function?a( )?{

????//?你要封装的异步代码

??})

??=>?promise?对象可以调用两个方法

????1.?p.then(function?( )?{ })

????2.?p.catch(function?( )?{ })

??+?promise对象.then(function?( )?{?...?})

????=>?给当前这个承诺注册一个?成功以后的函数

??+?promise对象.catch(function?( )?{?...?})

????=>?给当前这个承诺注册一个?失败以后的函数

??如何改变?promise?的状态

??+?在?new?Promise?的?a?函数内

??+?可以接受两个参数

????1.?第一个参数:?可以将该?Promise?的状态由继续转换为?成功

????2.?第二个参数:?可以将该?Promise?的状态由继续转换为?失败

// 1. 异步代码
const p = new Promise(function (resolve, reject) {
  // resolve 就是一个转换成功的方法
  // 当你书写 resolve() 的时候, 就是在把 该 promise 的状态转换为成功
  // 就会执行 .then 时候里面书写的 b 函数
  // reject 就是一个转换成失败的方法
  // 当你书写 reject() 的时候, 就是在把 该 promise 的状态转换为失败
  // 就会执行 .catch 时候里面书写的 c 函数
  // 这两个只能书写一个

  // 书写你需要封装的异步代码
  const time = 1000 * Math.round(Math.random() * 5 + 1)
  console.log('承诺一辈子在一起')
  setTimeout(() => {
    // 下面代码一旦执行, 就会把 promise 的状态改成成功
    // resolve()
    // 下面代码一旦执行, 就会把 promise 的状态改成失败
    // reject()
    if (time >= 3000) {
      // 因为会转换为成功 => 两人去世, 埋一个坟
      // 通知一下, 你该烧纸了
      // resolve() 调用的是 then 内部的函数 b
      // 所以这里书写在 () 内部的 time 内容就是给到 then 内 b 的实参
      resolve(time)
    } else {
      // 当做失败, 表示离婚
      // 通知一下, 该去炸坟了
      // reject() 调用的是 catch 内部的函数 c
      // 所以这里书写在 () 内部的 time 内容就是给到 catch 内 c 的实参, 也是报错信息
      reject(time)
    }
  }, time)
})
// promise 对象调用的两个方法
// 注册 成功
p.then(function b(t) {
  // 函数 b 不会被直接调用的
  // 这个位置的代码会在 p 这个 promise 的状态由 继续 转换为 成功 的时候调用执行
  console.log(t, '成功的函数 b')
  // t 就是你在 promise 内部书写的 resolve 的小括号里面 time 的内容
})
// 注册 失败
p.catch(function c(err) {
  // 函数 c 不会被直接调用
  // 这个位置的代码会在 p 这个 promise 的状态由 继续 转换为 失败 的时候调用执行
  console.log(err, '失败的函数 c')
})

4.?Promise 的进阶语法

+?当一个?Promise?的?then?内的代码

+?只要你在前一个?then?内部以?return?返回一个新的?promise?对象?的时候

+?新?promise?对象的?then?可以直接在前一个?then?的后面继续书写?then

?需求:

??1.?发送一个请求, 请求第一个接口

??2.?发送第二个请求, 请求第二个接口

????=>?前提:?必须要等到第一个请求结束以后再次发送

// 初始版 : 
// 需求 1 :
const p = new Promise(function (resolve, reject) {
  // 做异步的事情
  ajax({
    url: 'http://localhost:8888/test/first',
    success: function (res) {
      // 第一个请求成功了
      // res 就是后端给出的结果
      resolve(res)
    }
  })
})
p.then(function (res) {
  console.log('第一次请求结束了')
  console.log(res)
  // 需求2:
  const p2 = new Promise((resolve, reject) => {
    // 做异步的事情
    ajax({
      url: 'http://localhost:8888/test/second',
      dataType: 'json',
      success: function (res) {
        // 第一个请求成功了
        // res 就是后端给出的结果
        resolve(res)
      }
    })
  })
  p2.then(res => {
    console.log('第二个请求结束了')
    console.log(res)
  })
})

// 进阶版 :
const p = new Promise((resolve, reject) => {
  // 做异步的事情
  ajax({
    url: 'http://localhost:8888/test/first',
    success: function (res) {
      resolve(res)
    }
  })
})
// 向拿到 p 的 resolve 的结果
// 就得写 p.then()
p
  .then(function (res) {
    console.log('第一次请求的结果')
    console.log(res)
    // 做第二个事情
    const p2 = new Promise((resolve, reject) => {
      ajax({
        url: 'http://localhost:8888/test/second',
        dataType: 'json',
        success: function (res) {
          resolve(res)
        }
      })
    })

    // 在第一个 then 内部 return 一个 新的 promise 对象 p2
    return p2
  })
  .then(res => {
    console.log('第二次的请求结果')
    console.log(res)
  })

// 使用我按照 promise 形式封装的 pAjax 函数来完成
pAjax({ url: 'http://localhost:8888/test/first' })
  .then(res => {
    console.log('第一个请求结束了')
    console.log(res)

    // return 一个新的 promise 对象
    return pAjax({
      url: 'http://localhost:8888/test/second',
      dataType: 'json'
    })
  })
  .then(res => {
    console.log('第二个请求结果')
    console.log(res)

    // return 一个新的 promise 对象
    return pAjax({
      url: 'http://localhost:8888/test/third',
      data: 'name=Jack&age=20',
      dataType: 'json'
    })
  })
  .then(res => {
    console.log('第三次请求的结果')
    console.log(res)
  })

5.?async?函数?和?await?关键字

?+?ES7?~?ES8?之间出现的语法

+?作用?:

+?为了解决?Promise?的问题?,?把?Promise?的代码书写的更优雅

+?核心作用:?把?异步代码?写的?看起来像?同步代码,?本质还是异步

语法:

??=>?async?关键字?(异步)

??+?使用:?书写在函数的前面

??(可以是声明式函数,?可以是函数表达式,?可以是箭头函数)

????=>?async?function?( )?{ }

????=>?async?( )?=>?{ }

??+?作用:

????1.?该函数内可以使用?await?关键字了

????2.?会把该函数变成一个?异步函数,?只是叫做?异步函数

????(这个异步函数并不是我们真实的异步代码,只是给这个函数起了个名字)

??????=>?影响的是函数内部的代码?,?不影响函数外面的代码
// async 的语法
async function fn() {}
const fn = async function () {}
const fn = async a => {}
=>?await?关键字?(等待)

??+?要求:

????1.?await?必须写在一个有?async?关键字的异步函数内部

????2.?await?后面等待的内容必须是一个?promise?对象?,?否则等不了

??+?作用:

????=>?把?promise?中本该在?then?内代码接受的结果?,?

????可以直接在?await?前面定义变量接受

????=>?后续的代码需要等到?promise?执行完毕才会执行
console.log('start')	// ① start
async function fn() {
  console.log('我是 fn 函数内部的代码')	// ②
  // 因为 pAjax 是按照 promise 的语法形式进行封装的代码
  // pAjax 会返回一个 promise 对象
  // fn 函数内, 执行到 pAjax 这个代码的时候
  // 会等待, 等到这个异步的代码完全执行完毕, 把结果赋值给 r1 以后
  // 在继续执行后面的代码
  const r1 = await pAjax({ url: 'http://localhost:8888/test/first' })
  console.log(r1)	// ④
}
fn()
console.log('end')	// ③ end

console.log('start')  // 一 : start
async function fn() {
  // 此时 fn 函数内可以使用 await 关键字了
  // pAjax 返回出来的 promise 对象会执行
  // 把 resolve() 的时候 括号里面的内容 赋值给 r1. 在继续向后执行代码
  const r1 = await pAjax({ url: 'http://localhost:8888/test/first' })
  console.log(r1)   // 三 : 
  // 实现需求2:
  const r2 = await pAjax({
    url: 'http://localhost:8888/test/second',
    dataType: 'json'
  })
  console.log(r2)   // 四 : 
  // 实现需求3:
  const r3 = await pAjax({
    url: 'http://localhost:8888/test/third',
    data: 'name=Jack&age=20',
    dataType: 'json'
  })
  console.log(r3)   // 五 : 
}
fn()
console.log('end')  // 二 : end