AJAX之原理

XMLHttpRequest

基本使用

XMLHttpRequest对象用于与服务器交互
与axios关系：axios内部采用XMLHttpRequest与服务器交互
请求少的时候，不引用axios直接用XMLHttpRequest可以减少代码体积
使用步骤：

1. 创建XMLHttpRequest对象
2. 配置请求方法和url地址
3. 监听loadend事件(加载完成)，接收相应结果
4. 发起请求
   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=值

数据提交（注册账号）

核心：

1. 请求头设置Content-Type：application/json
2. 请求体携带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：操作失败
【注意】：

1. 对象一旦“已兑现”或“已拒绝”就不能再更改
2. Promise对象创建时，里面的代码都会执行了

Promise链式调用

概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一个任务，直到结束
细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果
好处：通过链式调用，解决回调函数嵌套的问题

eg：

async函数和await

1. 用法
   可以更简洁的写出基于Promise的异步行为
   概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值
   eg：

2. 捕获错误

   try {
       // 可能发生错误的代码
       // 如果某行代码错误，后面的则不会执行
   }catch(error) {
       // 检测到错误后执行的代码
   }