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

Magic.462

已于 2024-07-23 10:13:29 修改

阅读量208

点赞数 4

文章标签： ajax 前端 javascript css

于 2024-07-23 10:01:18 首次发布

本文链接：https://blog.csdn.net/2302_80141844/article/details/140627204

版权

一级目录

二级目录

三级目录

一、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=>{
})