同步与异步
同步代码
逐行执行，需要原地等待结果后，才继续向下执行
异步代码
调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数
认识 AJAX
什么是 AJAX
AJAX 是 异步的JavaScript和XML [Asynchronous JavaScript And XML]简单点说，就是使用XMLHttpRequest对象与服务器通信它可以使用 JSON, XML, HTML 和 text 文本等格式发送和接收数据AJAX 最吸引人的是它"异步"的特性，也就是说它能在不刷新页面的情况下与服务器进行，交互数据，或更新页面
如何使用 AJAX
先学会使用axios库，与服务器进行数据交互再学习XMLHttpRequest对象的使用，了解 AJAX的底层原理
使用 axios
基本使用
语法：
1.引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.使用 axios 函数：
2.1 传入配置对象
2.2 使用 .then 回调函数接收结果，并做后续处理
核心配置
请求方法
查询参数
提交数据
错误处理
处理格式
具体演示
XMLHttpRequest
认识 XHR
XHR 即 XMLHttpRequestXMLHttpRequest 对象用于与服务器交互通过 XMLHttpRequest 可以在不刷新页面的情况下，请求特定URL，获取数据这允许网页在不影响用户操作的情况下，更新页面的局部内容XMLHttpRequest 在 AJAX 编程中被大量使用我们使用的 axios 是一个封装好的库，它的底层使用 XMLHttpRequest 与服务器交互
基本使用
查询参数
数据提交
Promise
基本认识
Promise 对象用于表示一个异步操作的最终完成（或失败）的结果
Promise 对象有三种状态
待定状态------pending已兑现状态—fulfilled已拒绝状态—rejected
具体使用
需求：使用 Promise + XHR 获取省份列表
回调函数地狱
概念：在回调函数中嵌套回调函数，一直嵌套下去形成了回调函数地狱
缺点：
代码可读性差异常无法捕获耦合性严重，牵一发动全身
例子：如下
链式调用
基本认识
一个 Promise对象 在它的 then() 方法 里可以 return 一个 新的 Promise对象 利用好这个特性，就能串联下一个任务，实现链式调用
解决回调函数地狱
Promise.all 静态方法
基本认识
概念：合并多个Promise对象，等待所有的Promise对象完成，才进行后续逻辑
所有的Promise对象都成功，全体才算成功任意一个Promise对象失败了，全体都失败了
语法：如下
具体演示
简易版 axios (过程)
需求：基于 Promise + XHR 封装 myAxios 函数
回顾 axios 的功能
制作简易版的 axios
简易版 axios (模板)
为了方便日后使用简易版的 axios，现将它简化压缩成下面代码（用法不变）
function simpleAxios(config) {
return new Promise((resolve, reject) => {
config.params && (config.url += `?${new URLSearchParams(config.params).toString()}`)
const xhr = new XMLHttpRequest()
xhr.open(config.method, config.url)
xhr.addEventListener('loadend', () => {
if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.response)) }
else { reject(new Error(xhr.response)) }
})
if (config.data) {
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify(config.data))
} else { xhr.send() }
})
}
新方法实现异步
async 与 await
错误捕获
相关链接
您阅读本篇文章共花了：
发表评论