Ajax原理-XMLHttpRequest、Promise以及封装简易的axios函数
一级目录二级目录
三级目录
一、Ajax原理-XMLHttpRequest对象
1.步调
[*]创建XMLHttpRequest对象
[*]配置请求方法和请求url地址
[*]监听loadend变乱(加载结束变乱)，吸收响应效果
[*]发起请求
const xhr=new XMLHttpRequest()
xhr.open('GET','http://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend',()=>{
console.log(xhr.response)
//对响应结果做后续处理
//json字符串转为对象：json.parse
//对象转为数组:data.list
//数组转字符串.join()
})
xhr.send()
二、XMLHttpRequest-查询参数
1.界说
浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
2.语法
http://XXXx.com/Xxx/Xxx?参数名1=值1&参数名2=值2
//1.创建*URLSearchParams*对象
const paramsobj new URLSearchParams({
参数名1：值1，
参数名2：值2
})
//2.生成指定格式查询参数字符串
const querystring = paramsobj.tostring()
//结果：参数名1=值1&参数名2=值2
二、XMLHttpRequest-数据提交
1.需求
通过HR提交用户名和密码，完成注册功能
2.焦点
请求头设置Content–Type:application/json
请求体携带JSON字符串
//告诉服务器，我传递的内容类型，是JSON字符串
xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串
const user = {username:'itheima007',password:'7654321'}
const userstr = JSON.stringify(user)
//发送请求体数据
xhr.send(userstr)
三、Promise
1.界说
Promise对象用于表示一个异步操纵的最终完成（或失败）及其效果值
2.好处
[*]逻辑更清楚
[*]相识axios函数内部运作机制
[*]能解决回调函数地狱题目
//1.创建Promise对象
const p=new Promise((resolve,reject)={
//2.执行异步任务-并传递结果
//成功调用：resolve(值)触发then()执行
//失败调用：reject(值)触发catch()执行
})
//3.接收结果
p.then(result =>{
//成功
resolve('模拟Ajax请求-成功结果')
}).catch(error=>{
//失败
reject(new Error('模拟Ajax请求-失败结果'))
console.dir(error)//打印错误对象要用dir
})
3.三种状态
[*]作用：
相识Promise对象如何关联的处置处罚函数，以及代码实行次序
状态改变后， 调用关联的回调函数
[*]概念：
一个Promise对象，一定处于以下几种状态之一
待定(pending):初始状态，既没有被兑现，也没有被拒绝
已兑现(fulfilled):意味着，操纵乐成完成
已拒绝(rejected):意味着，操纵失败
注意：Promise对象一旦被兑现/拒绝就是已敲定了，状态无法被改变
四、封装简易的axios
1.需求：
基于Promise+XHR封装myAxios函数，获取省份列表展示
2.封装axios函数获取数据
[*]界说myAxios函数，吸收配置对象，返回Promise对象
[*]发起XHR请求，默认请求方法为GET
[*]调用乐成/失败的处置处罚步伐
function myAxios(config){
return new Promise((resolve,reject)=>{
//XHR请求
const xhr=new XMLHttpRequest()
xhr.open(config.method||'GET',config.url)
xhr.addEventListener('loadend',()=>{
//调用成功/失败的处理程序
if(xhr.status>=200&&xhr.status<300){
const newStr=JSON.parse(xhr.response).list.join('<br>')
resolve(newStr)
}else {
reject(new Error(xhr.response))
}
// console.log(xhr.response)
})
xhr.send()
})
}
myAxios({
ur1:·目标资源地址
}).then(result =>{
document.querySelector('.my-p').innerHTML=newStr
}).catch(error=>{
document.querySelector('.my-p').innerHTML=error.message
})
3.封装axios函数查询参数
[*]判断有params.选项，携带查询参数
[*]利用URLSearchParams转换，并携带到url上
[*]利用myAxiosi函数，获取地区列表
模块代码
if(config.params){
const paramsObj=new URLSearchParams(config.params)
const aueryString=paramsObj.tosSring()
config.url+=`?${queryString}`
}
完整源码
function myAxios(config){return new Promise((resolve,reject)=>{ //XHR请求 const xhr=new XMLHttpRequest() if(config.params){
const paramsObj=new URLSearchParams(config.params)
const aueryString=paramsObj.tosSring()
config.url+=`?${queryString}`
}
xhr.open(config.method||'GET',config.url) xhr.addEventListener('loadend',()=>{ //调用乐成/失败的处置处罚步伐 if(xhr.status>=200&&xhr.status<300){ const newStr=JSON.parse(xhr.response).list.join('<br>') resolve(newStr) }else { reject(new Error(xhr.response)) } // console.log(xhr.response) }) xhr.send() })}myAxios({ ur1:·目标资源地址 params:{ pname, cname }}).then(result =>{ document.querySelector('.my-p').innerHTML=newStr}).catch(error=>{ document.querySelector('.my-p').innerHTML=error.message}) 3.封装axios函数通报请求体数据
[*]myAxios函数调用后，判断data选项
[*]转换数据类型，在send方法中发送
[*]利用自己封装的Axios函数完成注册用户功能
模块代码
if(config.data){
const jsonStr=JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type','application/json')
const user = {username:'itheima007',password:'7654321'}
//发送请求体数据
xhr.send(jsonStr)
}else{
xhr.send()
}
完整源码
function myAxios(config){return new Promise((resolve,reject)=>{ //XHR请求 const xhr=new XMLHttpRequest() if(config.params){
const paramsObj=new URLSearchParams(config.params)
const aueryString=paramsObj.tosSring()
config.url+=`?${queryString}`
}
xhr.open(config.method||'GET',config.url) xhr.addEventListener('loadend',()=>{ //调用乐成/失败的处置处罚步伐 if(xhr.status>=200&&xhr.status<300){ const newStr=JSON.parse(xhr.response).list.join('<br>') resolve(newStr) }else { reject(new Error(xhr.response)) } // console.log(xhr.response) }) if(config.data){
const jsonStr=JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type','application/json')
const user = {username:'itheima007',password:'7654321'}
//发送请求体数据
xhr.send(jsonStr)
}else{
xhr.send()
}
})}myAxios({ ur1:·目标资源地址 method:'', data:{}}).then(result =>{}).catch(error=>{})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]