Ajax（2）

01.XMLHttpRequest - 基础使用

目标

了解 AJAX 原理 XHR 的基础使用

讲解

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

小结

1. AJAX 原理是什么?

1. 为什么学习 XHR ？

有更多与服务器数据通信方式
了解 axios 内部原理

1. XHR 使用步骤？

1. 创建 XHR 对象
2. 调用 open 方法，设置 url 和请求方法
3. 监听 loadend 事件，接收结果
4. 调用 send 方法，发起请求

02.XMLHttpRequest - 查询参数

讲解

1. 什么是查询参数：携带额外信息给服务器，返回匹配想要的数据
2. 查询参数原理要携带的位置和语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
3. 所以，原生 XHR 需要自己在 url 后面携带查询参数字符串，没有 axios 帮助我们把 params 参数拼接到 url 字符串后面了

小结

1. XHR 如何携带查询参数?（JS 对象如何转成查询参数格式字符串?）

在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值

03.XMLHttpRequest - 数据提交

步骤和语法：

1. 注意1：这次没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用
2. 注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换
3. 注意3：原生 XHR 需要在 send 方法调用时，传入请求体携带

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
})

// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串const user = { username: '1234567', password: '7654321' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)

小结

1. XHR 如何提交请求体数据?

在 send 中携带请求体数据，要按照后端要求的内容类型携带。

04.认识Promise

讲解

1. 什么是 Promise ？

   • Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值

2. Promise 的好处是什么？

   • 逻辑更清晰（成功或失败会关联后续的处理函数）
   • 了解 axios 函数内部运作的机制
   • 能解决回调函数地狱问题

3. Promise 管理异步任务，语法怎么用？

// 1. 创建 Promise 对象const p = new Promise((resolve, reject) => {
 // 2. 执行异步任务-并传递结果
 // 成功调用: resolve(值) 触发 then() 执行
 // 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
 // 成功
}).catch(error => {
 // 失败
})

1. 示例代码：

   /**
    * 目标：使用Promise管理异步任务
   */// 1. 创建Promise对象const p = new Promise((resolve, reject) => {
     // 2. 执行异步代码
     setTimeout(() => {
       // resolve('模拟AJAX请求-成功结果')
       reject(new Error('模拟AJAX请求-失败结果'))
     }, 2000)
   })
   
   // 3. 获取结果
   p.then(result => {
     console.log(result)
   }).catch(error => {
     console.log(error)
   })
   

小结

1. 什么是 Promise ?

表示（管理）一个异步操作最终状态和结果值的对象

1. 为什么学习 Promise ?

成功和失败状态，可以关联对应处理函数，了解 axios 内部运作的原理

1. Promise 使用步骤？

1. new Promise 对象执行异步任务。
2. 用 resolve 关联 then 的回调函数传递成功结果。
3. 用 reject 关联 catch 的回调函数传递失败结果。

05.认识Promise 的状态

讲解

1. 为什么要了解 Promise 的三种状态 ？

   • 知道 Promise 对象如何关联的处理函数，以及代码的执行顺序

2. Promise 有哪三种状态？

   每个 Promise 对象必定处于以下三种状态之一

   1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
   2. 已兑现（fulfilled）：操作成功完成
   3. 已拒绝（rejected）：操作失败
      状态的英文字符串，可以理解为 Promise 对象内的字符串标识符，用于判断什么时候调用哪一个处理函数
   4. Promise 的状态改变有什么用：调用对应函数，改变 Promise 对象状态后，内部触发对应回调函数传参并执行
   5. 注意：每个 Promise 对象一旦被兑现/拒绝，那就是已敲定了，状态无法再被改变

小结

1. Promise 对象有哪 3 种状态?

待定 pending，已兑现 fulfilled，已拒绝 rejected

1. Promise 状态有什么用?

状态改变后，如何关联处理函数

1. AJAX 如何判断是否请求响应成功了?

响应状态码在大于等于 200 并且小于 300 的范围是成功的

1. 自己封装的 myAxios 如何设置默认请求方法 GET?

config.method 判断有值就用，无值用‘GET’方法

1. 外面传入查询参数对象，myAxios 函数内如何转查询参数字符串?

使用 URLSearchParams 对象转换

1. 外面传入 data 选项，myAxios 函数内如何携带请求体参数?

判断外面传入了这个属性，自己转成 JSON 字符串并设置请求头并在 send 方法中携带