AJAX之原理
目录
- XMLHttpRequest
- 基本使用
- 查询参数
- 数据提交（注册账号）
- Promise
- 基本语法
- Promise三种状态
- Promise链式调用
- async函数和await
XMLHttpRequest
基本使用
XMLHttpRequest对象用于与服务器交互
与axios关系：axios内部采用XMLHttpRequest与服务器交互
请求少的时候，不引用axios直接用XMLHttpRequest可以减少代码体积
使用步骤：
- 创建XMLHttpRequest对象
- 配置请求方法和url地址
- 监听loadend事件(加载完成)，接收相应结果
- 发起请求
eg：
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url地址')
xhr.addEventListener('loadend', () => {<!-- 响应结果 -->console.log(xhr.response)
})
<!-- 发送请求 -->
xhr.send()
查询参数
语法：http://xxxx.com/xxx/xxx?参数名1=值&参数名2=值
生成指定格式查询参数：
// 创建URLSearchParams对象
const paramsObj = new URLSearchParams({参数：值
})const queryString = paramsObj.toString()
// 结果：参数名1=值&参数名2=值
数据提交（注册账号）
核心：
- 请求头设置Content-Type：application/json
- 请求体携带JSON字符串
语法：
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url地址')
xhr.addEventListener('loadend', () => {console.log(xhr.response)
})// 设置请求头，告诉服务器，我传递的内容类型，是JSON字符串
xhr.setRequestHeader('Content-Type','application/json')
// 准备数据并转成JSON字符串
const user = { username: '', password: ''}
const userStr = JSON.stringify(user)
// 发送请求体数据
xhr.send(userStr)
Promise
基本语法
Promise对象用于表示一个异步操作的完成（或失败）及其结果值
表示管理一个异步操作最终状态和结果值的对象
语法：
// 1. 创建一个Promise对象
const p = new Promise((resolve,reject) => {// 2. 执行异步任务并传递结果// 成功调用resolve（值） 触发then()执行// 失败调用reject（值） 触发catch()执行
})
// 3. 接收结果
p.then(res => {// 成功
}).catch(error => {// 失败
})
Promise三种状态
待定pending：初始状态，既没有兑现，也没有拒绝
已兑现fulfilled：操作成功完成
已拒绝rejected：操作失败
【注意】：
- 对象一旦“已兑现”或“已拒绝”就不能再更改
- Promise对象创建时，里面的代码都会执行了
Promise链式调用
概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一个任务，直到结束
细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果
好处：通过链式调用，解决回调函数嵌套的问题
eg：
async函数和await
-
用法
可以更简洁的写出基于Promise的异步行为
概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值
eg：
-
捕获错误
try {// 可能发生错误的代码// 如果某行代码错误，后面的则不会执行 }catch(error) {// 检测到错误后执行的代码 }