Ajax（2）

最新推荐文章于 2024-11-03 23:16:52 发布

###!!!

最新推荐文章于 2024-11-03 23:16:52 发布

阅读量38

点赞数 1

文章标签： ajax 前端

本文链接：https://blog.csdn.net/ge_ziye/article/details/132460968

版权

01.XMLHttpRequest - 基础使用

目标

了解 AJAX 原理 XHR 的基础使用

讲解

AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理
语法如下：

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

小结

AJAX 原理是什么?

window 提供的 XMLHttpRequest

为什么学习 XHR ？

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

XHR 使用步骤？

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

02.XMLHttpRequest - 查询参数

讲解

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

小结

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

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

03.XMLHttpRequest - 数据提交

步骤和语法：

注意1：这次没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用
注意2：没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换
注意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)

小结

XHR 如何提交请求体数据?

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

04.认识Promise

讲解

什么是 Promise ？
- Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值
Promise 的好处是什么？
- 逻辑更清晰（成功或失败会关联后续的处理函数）
- 了解 axios 函数内部运作的机制
- 能解决回调函数地狱问题
Promise 管理异步任务，语法怎么用？

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

示例代码：

/**
 * 目标：使用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)
})

小结

什么是 Promise ?

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

为什么学习 Promise ?

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

Promise 使用步骤？

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

05.认识Promise 的状态

讲解

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