Ajax原理-XMLHttpRequest、Promise以及封装简易的axios函数

一级目录

二级目录

三级目录

一、Ajax原理-XMLHttpRequest对象

1.步骤

1. 创建XMLHttpRequest对象
2. 配置请求方法和请求url地址
3. 监听loadend事件(加载结束事件)，接收响应结果
4. 发起请求

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.好处

1. 逻辑更清晰
2. 了解axios函数内部运作机制
3. 能解决回调函数地狱问题

//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.三种状态

1. 作用：
   了解Promise对象如何关联的处理函数，以及代码执行顺序
   状态改变后， 调用关联的回调函数
2. 概念：
   一个Promise对象，必然处于以下几种状态之一
   待定(pending):初始状态，既没有被兑现，也没有被拒绝
   已兑现(fulfilled):意味着，操作成功完成
   已拒绝(rejected):意味着，操作失败
   注意：Promise对象一旦被兑现/拒绝就是已敲定了，状态无法被改变

四、封装简易的axios

1.需求：

基于Promise+XHR封装myAxios函数，获取省份列表展示

2.封装axios函数获取数据

1. 定义myAxios函数，接收配置对象，返回Promise对象
2. 发起XHR请求，默认请求方法为GET
3. 调用成功/失败的处理程序

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函数查询参数

1. 判断有params.选项，携带查询参数
2. 使用URLSearchParams转换，并携带到url上
3. 使用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函数传递请求体数据

1. myAxios函数调用后，判断data选项
2. 转换数据类型，在send方法中发送
3. 使用自己封装的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=>{
})