Ajax学习

ajax实质是XMLHttpRequest(XHR)

anxios是封装的XHR+Promise

纯XHR

1
2
3
4
5
6
7
8
9
10
11
12
13
const xhr=new XMLHttpRequest()//获取一个实例

xhr.open('方法名 不区分大小写（post）'，'地址')

xhr.addEventListener('loadend'（加载完成的事件）,()=>{

//	console.log(xhr.response)
    const data=Json.parse(xhr.response)

})   //监听请求获取响应

xhr.send()  //发送请求

查询参数（对应anxios中的params）

1.在open中地址自己加上查询参数

2.URLSearchParams方法

1
2
3
4
5
6
7
8
9
10
const paramsObj=URLSearchParams({

//参数名：值，

//参数名：值

})

const queryString = paramsObj.toString()

模板字符串字符串进行拼接${queryString}

数据提交

请求头 设置Content-Type:application/json

请求体 携带JSON字符串

1
2
xhr.setRequestHeader('Content-Type','application/json')   //设置请求头
xhr.send('请求体数据')
anxios

会将获得的json字符串转换成对象

Promise 用于存放异步操作的结果

1
2
3
4
5
6
7
const p = new Promise((resolve,reject)=>{

//成功调用：resolve触发then（）

//失败调用：reject触发catch（）

})

Promise三种状态

pending待定状态 .catch已拒绝 .then已兑现

console.dir详细打印 （打印错误信息时）

同步与异步

回调函数地狱

回调函数嵌套回调函数

可读性差，异常无法获取，耦合性差牵一发而动全身

解决方法：Promise链式调用

.then（）方法会返回一个新生成的Promise对象

在.then内return一个new Promise（（resolve,reject）=>{}）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const p = new Promise((resolve,reject)=>{

//异步代码

})

const p2 = p.then((result)=>{

	return new Promise((resolve,reject)=>{

	//异步代码

	})

})
p2.then(result=>{
	//异步代码
})
1
2
3
4
5
6
7
8
9
10
 axios({url:  }).then(result=>{
//获得第一环Promise对象
   return axios({url:  ,params:{params}}).then(result=>{
   //获取第二环Promise对象
   		return	axios({url:  ,params:{params}}).then(result=>{
			//获取第三环Promise对象
   		})
   })

})
async函数与await

以一种更简洁的方式写出基于Promise的异步行为，无需刻意地链式调用promise

这种时候使用try…catch方法捕获错误

调用栈：当前执行的代码

宿主环境：异步代码先放在宿主环境中（如计时2000ms）

任务队列：在宿主环境中完成异步操作后在任务队列中等待调用栈空闲时，队列中的任务进入调用栈运行

await后调用相当于在.then之后的语句，应当加入微任务队列

shijianxh

宏任务与微任务

宏任务：由浏览器环境执行的异步代码

例如：js执行脚本事件，setTimeout/setInterval。AJAX请求完成事件，用户交互事件等

微任务：由js引擎环境执行的异步代码（.then）

例如：Promise对象.then（）的回调

shaijianxhx

优先调动微任务

Promise.all

合并多个promise对象，等待所有成功做后续逻辑

1
2
//p自身也是个Promise对象，通过.then（）获取结果
const p=Promise.all([Promise对象1,Promise对象2，...])