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 函数
语法:
实现步骤:
- 定义 myAxios 函数，接收配置对象，返回 Promise 对象
- 发起 XHR 请求，默认请求方法为 GET
- 调用成功/失败的处理程序
- 使用 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
})