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

这里写目录标题

一级目录
- 二级目录
- - 三级目录
一、Ajax原理-XMLHttpRequest对象
- 1.步骤
二、XMLHttpRequest-查询参数
- 1.定义
- 2.语法
二、XMLHttpRequest-数据提交
- 1.需求
- 2.核心
三、Promise
- 1.定义
- 2.好处
- 3.三种状态
四、封装简易的axios
- 1.需求：
- 2.封装axios函数获取数据
- 3.封装axios函数查询参数
- 3.封装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=>{
})