Ajax与Promise

---

一、Ajax介绍

1.1 服务器基础概念

---

---

---

---

---

---

• 在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写。

---

1.2 Ajax简介

---

1.3 请求报文和响应报文

• 请求报文规定了客户端以什么格式把数据发送给服务器
• 响应报文规定了服务器以什么格式把数据响应给客户端

---

1.4 http响应状态码

• http响应状态码：由三位数字组成，用来标识响应成功与否的状态，客户端浏览器根据响应状态码，即可判断请求是成功还是失败

---

• 注意：要区分http 响应状态码 和 业务状态码

---

---

二、form 表单和文件上传

2.1 form表单

• 网页中采集数据的表单由三个部分组成：表单标签、表单域、表单按钮

---

---

2.2 文件上传

FormData 概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。
应用场景：FormData + Ajax 技术实现文件上传的功能。

---

三、XMLHttpRequest

XMLHttpRequest 是浏览器内置的一个构造函数。
作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起Ajax 的请求。
axios 中的 axios.get()、axios.post()、axios() 方法，都是基于XMLHttpRequest（简称：XHR）封装出来的。

使用XMLHttpRequest 发起get请求的步骤

1. 创建 xhr 对象
2. 调用xhr.open()函数（设置请求方式和地址）
3. 调用xhr.send()函数（设置请求体，get没有，所以不写参数）
4. 监听load事件

 <script>
    // 步骤：
    // 1.创建一个xhr对象
    let xhr = new XMLHttpRequest()

    // 2.设置请求方式和请求地址 xhr.open("请求方式", "请求地址")
    xhr.open('get', 'http://ajax-api.itheima.net/api/province')

    // 3.发送请求
    // xhr.send(请求体的数据)
    // 因为get请求方式是没有请求体的，所以send的参数不写
    xhr.send()

    // 4.监听load(请求成功)事件 ==> 可以获取响应数据
    xhr.addEventListener('load', function () {
      console.log(xhr.response) // json字符串

      // JSON.parse()
      console.log(JSON.parse(xhr.response)) // js对象
    })
 </script>

---

使用XMLHttpRequest 发起post请求的步骤

1. 创建 xhr 对象
2. 调用xhr.open()函数（设置请求方式和地址）
3. 调用xhr.setRequestHeader() 函数（设置请求体对应的编码格式）
4. 调用xhr.send()函数（设置请求体）
5. 监听load事件

 <script>
    // 步骤：
    // 1.创建一个xhr对象
    let xhr = new XMLHttpRequest()

    // 2.设置请求方式和请求地址 xhr.open("请求方式", "请求地址")
    xhr.open('post', 'http://ajax-api.itheima.net/api/books')

    // 3.设置请求体对应的编码格式
    xhr.setRequestHeader('Content-Type', 'application/json')

    // 4.发送请求  send(请求体数据) 
    // json数据格式
    xhr.send('{"bookname":"水浒传","author":"施耐庵","publisher":"新华出版社"}') // 键值对字符串格式

    // 5.监听load(请求成功)事件
    xhr.addEventListener('load', function () {
      console.log(JSON.parse(xhr.response))
    })
  </script>

四、JSON

• JSON是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

// 1. JSON 本质是字符串，字符串里面可以有对象、数组
// 2. 键名必须使用双引号包裹（不能没有双引号、不能去使用单引号、反引号）
// 3. 值如果是字符串类型，也必须使用双引号
// 4. JSON数据里面不能出现 undefined 、函数

// 序列化：是js数据 转成 json字符串数据     方法： JSON.stringify()
// 反序列化：是json字符串数据 转成 js数据    方法： JSON.parse()


// JS对象
let obj = { name: 'zs', age: 19 }
// '{"name":"zs","age":19}'
console.log(JSON.stringify(obj)) 


// JS数组
let arr = ['zs', 'ls', 'ww']
// '["zs","ls","ww"]'
console.log(JSON.stringify(arr)) 

五、Promise

5.1 异步函数和回调函数

回调函数的弊端

1. 回调函数的阅读性不好, 回调不会立马执行
2. 回调函数如果有大量的嵌套, 可维护性差

5.2 promise的基本语法

  <script>
    // 1.许下诺言
    // Promise 是个构造函数，new Promise创建了实例对象 ==> 许了一个诺言
    let p = new Promise((resolve, reject) => {
      // 参数是个函数，把异步操作封装写入到该函数里面
      console.log('我许了个诺言')

      // 参数resolve, reject都是函数

      // 许诺成功
      // 当调用 resolve()，会把promise状态变成 fulfilled，成功（已完成）
      // resolve('成功了')

      // 许诺失败
      // 调用 reject(),会把promise状态变成 rejected， 失败（未完成）
      reject('失败了')
    })
    console.log(p)


    // 2. 获取诺言的结果
    //  then 和 catch方法获取诺言成功、失败的结果

    p.then((res) => {
      // then方法会在诺言成功的时候来执行
      // 形参res对应的就是诺言成功的结果
      console.log(res, '恭喜')  // 成功了，恭喜
    }).catch((err) => {
      // catch方法会在诺言失败的时候来执行
      // 形参err对应的是诺言失败的结果
      console.log(err) // 失败了
    })
  </script>

5.3 promise的链式调用

---

 <script>
    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("结果1") // 状态 fulfilled 成功
      }, 2000);
    })

    // 获取到成功的结果
    p.then(res => {
      console.log("第一个then执行");
      console.log(res); // 结果1

      // 在then方法内返回了promise实例对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("结果2") // 状态 fulfilled 成功
        }, 2000)
      })
    }).then((res) => {
      console.log('第二个then执行')
      console.log(res) // 结果2
    })
  </script>

---

• 用Promise解决回调地狱的问题

  <script>
    setTimeout(() => {
      console.log('红色')
      setTimeout(() => {
        console.log('黄色')
        setTimeout(() => {
          console.log('蓝色')
        }, 3000);
      }, 1000);
    }, 2000);
  </script>

  // 1.下面是用 Promise 改写回调地狱的代码
  <script>
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('红色')
      }, 2000)
    }).then((res) => {
      console.log(res) // 红色

      // return 新的 Promise 实例对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('黄色')
        }, 1000)
      }).then((res) => {
        console.log(res) // 黄色

        // return 新的 Promise 实例对象
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('蓝色')
          }, 3000)
        })
      }).then((res) => {
        console.log(res)
      })
    })
  </script>

// 但是上面的代码实在是太冗余了，怎么办呢？
// 2.解决方式：将创建promise对象的过程，封装到一个函数中，需要promise对象，调函数即可
<script>
    // 封装一个获取颜色的函数
    function fn(color, time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(color)
        }, time)
      })
    }

    fn('红色', 2000).then((res) => {
      console.log(res)
      return fn('黄色', 1000)
    }).then((res) => {
      console.log(res)
      return fn('蓝色', 3000)
    }).then((res) => {
      console.log(res)
    })
 </script>

// 3.使用await和async改写
 <script>
    function fn(color, time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(color)
        }, time)
      })
    }

    async function demo() {
      let color1 = await fn('红色', 2000)
      console.log(color1)

      let color2 = await fn('黄色', 1000)
      console.log(color2)

      let color3 = await fn('蓝色', 3000)
      console.log(color3)
    }

    demo()
 </script>

5.4 promise的常用静态方法

axios.defaults.baseURL = 'http://ajax-api.itheima.net'

Promise.all([axios.get('/api/books'), axios.get('/api/news')]).then((res) => {
  console.log(res) // 数组，里面每一项是axios请求成功的结果
}).catch((err) => {
  // 只要有一个promise对象失败了，走到catch这
  console.log('在catch了', err)
})

Promise.race([axios.get('/api/books'), axios.get('/api/news')]).then((res) => {
  // 最先成功的结果（不是固定的）
  console.log(res) 
})

5.5 promise封装自己的ajax

自定义的一个 myAjax 函数，它接收一个配置对象作为参数。配置对象中包含如下 参数选项：

<body>
  <button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>
  <button id="btnPost2">发送FormData请求</button>
  <button id="btnPost3">发送键值对字符串请求</button>

  <script>
    function myAjax({ method = 'get', url, params, data }) {
      return new Promise((resolve, reject) => {
        // ajax异步代码
        // 1.创建一个xhr对象 
        // 2.调用xhr.open()，设置请求方式和地址
        // 3.post请求还需调用xrh.setRequestHeader()函数，设置请求体对应的编码格式
        // 4.调用xhr.send()设置请求体（get请求没有请求体，直接xhr.send()即可）
        // 5.监听load事件

        // 1.
        const xhr = new XMLHttpRequest()
        // 如果有params对象，把它转换为键值对的形式，放到url地址后面
        if (params) {
          let arr = []
          for (let k in params) {
            arr.push(`${k}=${params[k]}`)
          }
          // 把键值对字符串拼接到url地址后面，并用 ？隔开
          url = url + `?${arr.join('&')}` // // url = url + ?name=lw&age=19
        }
        // 2.
        xhr.open(method, url)
        if (method.toLowerCase() === 'get') {
          // 4.get请求没有请求体，直接send
          xhr.send()
        } else {
          if (data) {
            // 3.处理data数据
            xhr.setRequestHeader('Content-Type', 'application/json')
            // 4.把data对象处理成json字符串，发送给服务器
            xhr.send(JSON.stringify(data))
          }
        }
        // 5.
        xhr.addEventListener('load', function () {
          resolve(JSON.parse(xhr.response))
        })
        // 监听error事件，处理请求失败
        xhr.addEventListener('error', function () {
          reject('请求失败，请稍后再试')
        })
      })
    }

     // 发送get请求
     document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAjax({
        // method: 'gEt',
        url: 'http://ajax-api.itheima.net/api/city',
        params: {
          pname: '辽宁省'
        }
      }).then((res) => {
        console.log(res)   // 成功的响应结果
      }).catch((err) => {
        console.log(err)   // 失败的响应结果
      })
    })
  </script>
</body>

5.6 async 和 await

1. async用于修饰一个函数, 表示一个函数是异步的，如果async函数内没有await， 那么async没有意义的, 全是同步的内容，只有遇到了await开始往下，才是异步的开始
2. await 要用在 async 函数中
3. await 后面一般会跟一个promise对象，await会阻塞async函数的执行，直到等到 promise成功的结果(resolve的结果)
4. await 只会等待 promise 成功的结果，如果失败了会报错，需要 try catch

六、事件循环

6.1 进程和线程

• 进程：程序运⾏需要有它⾃⼰专属的内存空间，可以把这块内存空间简单的理解为进程。每个应⽤⾄少有⼀个进程，进程之间相互独⽴，即使要通信，也需要双⽅同意。
• 线程：有了进程后，就可以运⾏程序的代码了，运⾏代码的「⼈」称之为「线程」。⼀个进程⾄少有⼀个线程，所以在进程开启后会⾃动创建⼀个线程来运⾏代码，该线程称之为主线程。如果程序需要同时执⾏多块代码，主线程就会启动更多的线程来执⾏代码，所以⼀个进程中可以包含多个线程。

6.2 浏览器的进程和线程

• 浏览器是⼀个多进程多线程的应⽤程序
• 浏览器内部⼯作极其复杂，为了避免相互影响，崩溃的⼏率，当启动浏览器后，它会⾃动启动多个进程

主要有：

1. 浏览器进程：主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务
2. ⽹络进程：负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务
3. 渲染进程：渲染进程启动后，会开启⼀个渲染主线程，主线程负责执⾏ HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的标签⻚之间不相互影响。
   

---

• 要处理这么多的任务，主线程遇到了⼀个前所未有的难题：如何调度任务？

⽐如：
我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候⽤户点击了按钮，我该⽴即去执⾏点击事件的处理函数吗？
我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候某个计时器到达了时间，我该⽴即去执⾏它的回调吗？
浏览器进程通知我“⽤户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪⼀个呢？

• 这时，渲染主线程想出了⼀个绝妙的主意来处理这个问题：排队

6.3 异步

• 渲染主线程承担着极其重要的⼯作，⽆论如何都不能阻塞！
• 因此，浏览器选择异步来解决这个问题，使⽤异步的⽅式，渲染主线程永不阻塞！

⾯试题：如何理解 JS 的异步？
参考答案：

1. JS是⼀⻔单线程的语⾔，因为它运⾏在浏览器的渲染主线程中，⽽渲染主线程只有⼀个。
2. 由于渲染主线程⼯作太多，渲染⻚⾯、执⾏ JS 都在其中运⾏，如果使⽤同步的⽅式，就可能引起主线程阻塞，导致消息队列中的很多其他任务⽆法得到执⾏，使得⻚⾯⽆法及时更新，给⽤户造成卡死现象。
3. 所以浏览器采⽤异步的⽅式来避免，当某些任务发⽣时（计时器、⽹络、事件监听等），主线程将任务交给其他线程去处理，⾃身继续执⾏后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加⼊到消息队列的末尾排队，等待主线程调度执⾏。
4. 在这种异步模式下，浏览器永不阻塞，从⽽最⼤限度的保证了单线程的流畅运⾏。

6.4 事件循环

随着浏览器的复杂度急剧提升，W3C 不再使⽤宏队列的说法！

在⽬前 chrome 的实现中，⾄少包含了下⾯的队列：

• 延时队列：⽤于存放计时器到达后的回调任务，优先级「中」
• 交互队列：⽤于存放⽤户操作后产⽣的事件处理任务，优先级「⾼」
• 微队列：⽤户存放需要最快执⾏的任务，优先级「最⾼」

注意：Promise 本身是同步的，而.then和.catch回调函数是异步的

⾯试题：阐述⼀下 JS 的事件循环
参考答案：

1. 事件循环⼜叫做消息循环，是浏览器渲染主线程的⼯作⽅式。
2. 在 Chrome 的源码中，它开启⼀个不会结束的 for 循环，每次循环从消息队列中取出第⼀个任务执⾏，⽽其他线程只需要在合适的时候将任务加⼊到队列末尾即可。
3. 过去把消息队列简单分为宏队列和微队列，随着浏览器复杂度的提升，取⽽代之的是⼀种更加灵活多变的处理⽅式。
4. 根据 W3C官⽅的解释，每个任务有不同的类型，同类型的任务必须在同⼀个队列，不同的任务可以属于不同的队列，不同任务队列有不同的优先级。
5. 在⼀次事件循环中，由浏览器⾃⾏决定取哪⼀个队列的任务，但浏览器必须有⼀个微队列，微队列的任务⼀定具有最⾼的优先级，必须优先调度执⾏。

• 事件循环练习题

// 1 3 4 5 6 2 
console.log(1)

setTimeout(function () {
    console.log(2)
}, 0)

const p = new Promise((resolve, reject) => {
    console.log(3)
    resolve(6)
    console.log(4)
})

p.then(res => {
    console.log(res)
})

console.log(5)

 // 1 5 10 6 2 3 4 7 8 9
console.log(1)

setTimeout(function () {
  console.log(2)
  new Promise(function (resolve) {
    console.log(3)
    resolve()
  }).then(function () {
    console.log(4)
  })
})

new Promise(function (resolve) {
  console.log(5)
  resolve()
}).then(function () {
  console.log(6)
})

setTimeout(function () {
  console.log(7)
  new Promise(function (resolve) {
    console.log(8)
    resolve()
  }).then(function () {
    console.log(9)
  })
})

console.log(10)

七、浏览器的渲染原理

• 当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
• 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
  

---

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

---

• 解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML 中的外部 CSS 文件和 外部的 JS 文件。
• 如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。
• 如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML解析的根本原因。
• 第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

---

• 主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。
• 在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成px
• 这一步完成后，会得到一棵带有样式的 DOM 树。

---

接下来是布局，布局完成后会得到布局树。

• 布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。
• 大部分时候，DOM 树和布局树并非一一对应。
• 比如display:none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM
  树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。

---

• 主线程会使用一套复杂的策略对整个布局树中进行分层。
• 分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。
• 滚动条、堆叠上下文、transform、opacity等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。

---

• 主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。
• 完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

---

• 合成线程首先对每个图层进行分块，将其划分为更多的小区域，它会从线程池中拿取多个线程来完成分块工作。

• 合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化
• GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块
• 光栅化的结果，就是一块一块的位图

---

• 合成线程拿到每个层、每个块的位图后，生成一个个指引信息
• 指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形
• 变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因
• 合成线程会把指引提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像