1:了解 AJAX 原理 XHR 的基础使用
-(1). AJAX 是浏览器与服务器通信的技术,采用 XMLHttpRequest 对象相关代码
-(2). axios 是对 XHR 相关代码进行了封装,让我们只关心传递的接口参数
-(3). 学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理
语法:
//创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
//配置请求方法和请求 url 地址
xhr.open('请求方法', '请求url网址')
//监听 loadend 事件,接收响应结果
xhr.addEventListener('loadend', () => {
// 响应结果
console.log(xhr.response)
})
//发起请求
xhr.send()
2:使用XMLHttpRequest查询参数
-查询参数原理要携带的位置和语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
-在调用 open 方法的时候,在 url? 后面按照指定格式拼接参数名和值
-(例)xhr.open('GET', 'url地址?参数名=值')
3:URLSearchParams的使用
-但是多个查询参数,如果自己拼接很麻烦, URLSearchParams 能把参数对象转成“参数名=值&参数名=值“格式的字符串
// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
参数名1: 值1,
参数名2: 值2
})
// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果:参数名1=值1&参数名2=值2
4:使用XMLHttpRequest数据提交
1):没有 axios 帮我们了,我们需要自己设置请求头 Content-Type:application/json,来告诉服务器端,我们发过去的内容类型是 JSON 字符串,让他转成对应数据结构取值使用
-xhr.setRequestHeader('Content-Type', 'application/json')
2):没有 axios 了,我们前端要传递的请求体数据,也没人帮我把 JS 对象转成 JSON 字符串了,需要我们自己转换
-const user = { username: 'abc123', password: '666666' }
const userStr = JSON.stringify(user)
3):发送请求体数据
-xhr.send(userStr)
5:Promise的使用
-Promise 对象用于表示一个异步操作的最终完成(或失败)及其结构值
-Promise 的好处是逻辑更清晰(成功或失败会关联后续的处理函数)让我们更了解 axios 函数内部运作的机制
-1. new Promise 对象执行异步任务。
-2. 用 resolve 关联 then 的回调函数传递成功结果。
-3.用 reject 关联 catch 的回调函数传递失败结果。
例):// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
// 2. 执行异步任务-并传递结果
// 成功调用: resolve(值) 触发 then() 执行
// 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
// 成功
}).catch(error => {
// 失败
})
6:Promise 的状态
-1. 待定(pending):初始状态,既没有被兑现,也没有被拒绝
-2. 已兑现(fulfilled):操作成功完成
-3. 已拒绝(rejected):操作失败
-4. Promise 的状态改变有什么用:调用对应函数,改变 Promise 对象状态后,内部触发对应回调函数传参并执行
-5.每个 Promise 对象一旦被兑现/拒绝,那就是已敲定了,状态无法再被改变
7:使用Promise和XML封装简易axios
1. 创建 Promise 对象
2. 执行 XHR 异步代码,获取省份列表数据
3. 关联成功或失败回调函数,做后续的处理
例)const p = new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
xhr.open('请求方法',url)
xhr.addEventListener('loadend',()=>{
//判断响应是否成功
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
p.then(result=>{
//响应成功做后续处理
}).catch(err=>{
//响应失败 返回错误提示信息
})
8:简易axios的补充
-在封装函数可以判断是否传递了method,默认GET,
-xhr.open(config.method || 'GET', config.url)
-利用封装函数判断params选项
//1. 判断有params选项,携带查询参数
if (config.params) {
// 2. 使用URLSearchParams转换,并携带到url上
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
// 把查询参数字符串,拼接在url?后面
config.url += `?${queryString}`
}
9:封装简易axios的提交功能
-1. myAxios 函数调用后,判断 data 选项
-2. 转换数据类型,在 send 方法中发送
// 1. 判断有data选项,携带请求体
if (config.data) {
// 2. 转换数据类型,在send中发送
const jsonStr = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(jsonStr)
} else {
// 如果没有请求体数据,正常的发起请求
xhr.send()
}