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

一级目录

二级目录

三级目录

一、Ajax原理-XMLHttpRequest对象

1.步调

• 创建XMLHttpRequest对象
  
• 配置请求方法和请求url地址
  
• 监听loadend变乱(加载结束变乱)，吸收响应效果
  
• 发起请求
  

1. const xhr=new XMLHttpRequest()
2. xhr.open('GET','http://hmajax.itheima.net/api/province')
3. xhr.addEventListener('loadend',()=>{
4.     console.log(xhr.response)
5.     //对响应结果做后续处理
6.     //json字符串转为对象：json.parse
7.     //对象转为数组:data.list
8.     //数组转字符串.join()
9. })
10. xhr.send()

复制代码

二、XMLHttpRequest-查询参数

1.界说

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
2.语法

1. http://XXXx.com/Xxx/Xxx?参数名1=值1&参数名2=值2
2. //1.创建*URLSearchParams*对象
3. const paramsobj new URLSearchParams({
4. 参数名1：值1，
5. 参数名2：值2
6. })
7. //2.生成指定格式查询参数字符串
8. const querystring = paramsobj.tostring()
9. //结果：参数名1=值1&参数名2=值2

复制代码

二、XMLHttpRequest-数据提交

1.需求

通过HR提交用户名和密码，完成注册功能
2.焦点

请求头设置Content–Type:application/json
请求体携带JSON字符串

1. //告诉服务器，我传递的内容类型，是JSON字符串
2. xhr.setRequestHeader('Content-Type','application/json')
3. //准备数据并转成JSON字符串
4. const user = {username:'itheima007',password:'7654321'}
5. const userstr = JSON.stringify(user)
6. //发送请求体数据
7. xhr.send(userstr)

复制代码

三、Promise

1.界说

Promise对象用于表示一个异步操纵的最终完成（或失败）及其效果值
2.好处

• 逻辑更清楚
  
• 相识axios函数内部运作机制
  
• 能解决回调函数地狱题目
  

1. //1.创建Promise对象
2. const p=new Promise((resolve,reject)={
3.     //2.执行异步任务-并传递结果
4.     //成功调用：resolve(值)触发then()执行
5.     //失败调用：reject(值)触发catch()执行
6. })
7. //3.接收结果
8. p.then(result =>{
9.     //成功
10.     resolve('模拟Ajax请求-成功结果')
11. }).catch(error=>{
12.     //失败
13.     reject(new Error('模拟Ajax请求-失败结果'))
14.     console.dir(error)//打印错误对象要用dir
15. })

复制代码

3.三种状态

• 作用：
  相识Promise对象如何关联的处置处罚函数，以及代码实行次序
  状态改变后， 调用关联的回调函数
  
• 概念：
  一个Promise对象，一定处于以下几种状态之一
  待定(pending):初始状态，既没有被兑现，也没有被拒绝
  已兑现(fulfilled):意味着，操纵乐成完成
  已拒绝(rejected):意味着，操纵失败
  注意：Promise对象一旦被兑现/拒绝就是已敲定了，状态无法被改变
  

四、封装简易的axios

1.需求：

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

• 界说myAxios函数，吸收配置对象，返回Promise对象
  
• 发起XHR请求，默认请求方法为GET
  
• 调用乐成/失败的处置处罚步伐
  

1. function myAxios(config){
2. return new Promise((resolve,reject)=>{
3.     //XHR请求
4.       const xhr=new XMLHttpRequest()
5.       xhr.open(config.method||'GET',config.url)
6.       xhr.addEventListener('loadend',()=>{
7.             //调用成功/失败的处理程序
8.         if(xhr.status>=200&&xhr.status<300){
9.           const newStr=JSON.parse(xhr.response).list.join('<br>')
10.           resolve(newStr)
11.         }else {
12.           reject(new Error(xhr.response))
13.         }
14.         // console.log(xhr.response)
15.       })
16.       xhr.send()
17.     })
18. }
19. myAxios({
20.     ur1:·目标资源地址
21. }).then(result =>{
22.     document.querySelector('.my-p').innerHTML=newStr
23. }).catch(error=>{
24.     document.querySelector('.my-p').innerHTML=error.message
25. })

复制代码

3.封装axios函数查询参数

• 判断有params.选项，携带查询参数
  
• 利用URLSearchParams转换，并携带到url上
  
• 利用myAxiosi函数，获取地区列表
  模块代码
  

1. if(config.params){
2.               const paramsObj=new URLSearchParams(config.params)
3.               const aueryString=paramsObj.tosSring()
4.               config.url+=`?${queryString}`
5.       }

复制代码

完整源码

1. function myAxios(config){return new Promise((resolve,reject)=>{    //XHR请求      const xhr=new XMLHttpRequest()      if(config.params){
2.               const paramsObj=new URLSearchParams(config.params)
3.               const aueryString=paramsObj.tosSring()
4.               config.url+=`?${queryString}`
5.       }
6.       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函数完成注册用户功能
  模块代码
  

1.       if(config.data){
2.               const jsonStr=JSON.stringify(config.data)
3.               xhr.setRequestHeader('Content-Type','application/json')
4.                 const user = {username:'itheima007',password:'7654321'}
5.                 //发送请求体数据
6.                 xhr.send(jsonStr)
7.       }else{
8.       xhr.send()
9.       }

复制代码

完整源码

1. function myAxios(config){return new Promise((resolve,reject)=>{    //XHR请求      const xhr=new XMLHttpRequest()      if(config.params){
2.               const paramsObj=new URLSearchParams(config.params)
3.               const aueryString=paramsObj.tosSring()
4.               config.url+=`?${queryString}`
5.       }
6.       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){
7.               const jsonStr=JSON.stringify(config.data)
8.               xhr.setRequestHeader('Content-Type','application/json')
9.                 const user = {username:'itheima007',password:'7654321'}
10.                 //发送请求体数据
11.                 xhr.send(jsonStr)
12.       }else{
13.       xhr.send()
14.       }
15.     })}myAxios({    ur1:·目标资源地址    method:'',    data:{}}).then(result =>{}).catch(error=>{})

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。