AJAX原理:
利用window的XMLHttpRequest对象与服务器进行通信的技术
axios概念:
axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
XHR
学习XHR( XMLHttpRequest )的原因:
1-交互简便: 如果静态网站与服务器交互的地方只有一到两处, 且我们希望缩小静态网站的体积, 我们此时就不需要引入axios, 而是利用XHR几行代码就可以进行简便交互了
2-理解axios原理: 通过对XHR的学习, 我们可以对axios有一个很好的理解.
XHR的使用方式:
基础使用:
// 1, 创建XMLHttpRequest对象 const xhr = new XMLHttpRequest() // 2, 配置请求方法和URL地址 xhr.open('请求方法', '请求url网址') // 3, 监听 loadend 事件, 接收响应结果 xhr.addEventListener('loadend', () => { // 响应结果 console.log(xhr.response) }) xhr.send()
携带查询参数: 在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值
xhr.open('GET', '<http://hmajax.itheima.net/api/city?pname=辽宁省>')
如何数据提交:
1- 设定XHR
2- 设定提交的数据类型
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: 'itheima007', password: '7654321' } const userStr = JSON.stringify(user) // 3. 发送请求体数据 xhr.send(userStr)
Promise
Promise概念:
管理一个异步操作最终状态和结果的对象
Promise好处:
逻辑清晰: 异步操作的成功和失败状态会调用对应处理函数
了解 axios 函数内部运作的机制
语法:
// 1. 创建 Promise 对象 const p = new Promise((resolve, reject) => { // 2. 执行异步任务-并传递结果 // 成功调用: resolve(值) 触发 then() 执行 // 失败调用: reject(值) 触发 catch() 执行 }) // 3. 接收结果 p.then(result => { // 成功 }).catch(error => { // 失败 })
状态:
Promise对象的状态改变后, 会调用相应的回调函数
待定（pending）：初始状态，既没有被兑现，也没有被拒绝
已兑现（fulfilled）：操作成功完成
已拒绝（rejected）：操作失败
// 1. 创建Promise对象（pending-待定状态） const p = new Promise((resolve, reject) => { // Promise对象创建时，这里的代码都会执行了 // 2. 执行异步代码 setTimeout(() => { // resolve() => 'fulfilled状态-已兑现' => then() resolve('模拟AJAX请求-成功结果') // reject() => 'rejected状态-已拒绝' => catch() reject(new Error('模拟AJAX请求-失败结果')) }, 2000) }) console.log(p) // 3. 获取结果 p.then(result => { console.log(result) }).catch(error => { console.log(error) })
输出结果:
Promise [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: "模拟AJAX请求-成功结果"
封装简易axios
需求：基于 Promise 和 XHR 封装 myAxios 函数
语法:
实现步骤:
1.定义 myAxios 函数，接收配置对象，返回 Promise 对象
2.发起 XHR 请求，默认请求方法为 GET
3.调用成功/失败的处理程序
4.使用 myAxios 函数
function myAxios(config) { return new Promise((resolve, reject) => { // XHR 请求 // 调用成功/失败的处理程序 }) } myAxios({ url: '目标资源地址' }).then(result => { }).catch(error => { })
案例:
// 1. 定义myAxios函数，接收配置对象，返回Promise对象 function myAxios(config) { return new Promise((resolve, reject) => { // 2. 发起XHR请求，默认请求方法为GET const xhr = new XMLHttpRequest() xhr.open(config.method || 'GET', config.url) xhr.addEventListener('loadend', () => { // 3. 调用成功/失败的处理程序 if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.response)) } else { reject(new Error(xhr.response)) } }) xhr.send() }) } // 4. 使用myAxios函数，获取省份列表展示 myAxios({ url: '<http://hmajax.itheima.net/api/province>' }).then(result => { console.log(result) document.querySelector('.my-p').innerHTML = result.list.join('<br>') }).catch(error => { console.log(error) document.querySelector('.my-p').innerHTML = error.message })
参考: AJAX-Day01-01.AJAX入门与axios使用_哔哩哔哩_bilibili
