ajax、promise封装ajax、axios

本文章有使用提到的ajax案例进行promise封装

1. 常见异步操作：

使用回调函数实现：
1.AJAX请求
2.fs文件操作
3.数据库操作
4.定时器

2. ajax

ajax使用案例

const btn=document.querySelector('.xx');
//定义 点击事件 去触发 ajax 请求
btn.addEventListener('click',function(){
	//1.创建对象
	const xhr = new XMLHttpRequest();
	//可以设置响应结果的类型
	xhr.responseType = 'json' 
	//2.初始化
	xhr.open('GET','https://localhost:8080/login');
	//3.发送
	xhr.send();
	//4.处理响应结果（使用回调函数）
	xhr.onreadystatechange = function (){
		if(xhr.readyState === 4){
			//认定状态码200~300为成功时：
			if(xhr.status>=200 && xhr.status <300){
				//控制台输出响应体
				console.log(xhr.response)
			}else{
				console.log(xhr.status)
			}		
		}
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3. promise

是JS中进行异步编程的 新解决方案
旧方案：单纯使用回调函数。
语法：构造函数。可以实例化对象，封装异步操作，获取成功或失败的结果

promise的状态

返回promise对象时，实例对象的属性：promiseState
其值是：

• pending 未决定的；
• resolved / fulfilled 成功 ；
• rejected 失败 ；

一个promise对象只能改变一次：不改变状态不执行then回调,改变状态后执行then回调.
状态改变只能是函数resolve、reject、throw，状态变化为：pending ->resolved 或者 pending ->rejected

promise对象的值

返回promise对象时，实例对象的另一个属性：promiseResult
其值是：保存着对象 成功/失败 的结果
函数resolve、reject 可以对该属性值进行操作，promiseResult保存对应函数的参数值

promise执行过程简述：

let p = new promise((resolve,reject)=>{
	// resolve、reject、throw 来改变状态
}).then(
	//回调函数
	(value)=>{},(reason)=>{})
1
2
3
4
5

1.指定回调->改变状态->执行回调
2.改变状态->指定回调->执行回调

promise优势：

指定回调函数方式更灵活
支持链式调用，可以解决回调地狱问题：

回调地狱：嵌套调用，外部回调函数异步执行的结果是嵌套回调执行的条件
缺点:不便于阅读，不便于异常处理

promise使用案例

//resolve 函数类型的数据 成功调用 将promise对象状态设置为成功
//reject 函数类型的数据  失败调用 将promise对象状态设置为失败
const p = new Promise((resolve,reject)=>{
	//以fs文件操作为例子
	fs.readFile('./content.txt',(err,data)=>{
		//失败时调用
		if(err) reject(err);
		//成功时调用
		resolve(data);
	})
	
});
p.then(
//状态为 成功 时调用
(data) => {},
//状态为 失败 时调用
(err) => {}).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

封装上面ajax案例

const btn=document.querySelector('.xx');
//定义 点击事件 去触发 ajax 请求
btn.addEventListener('click',function(){
	const p = new Promise((resolve,reject)=>{
	//1.创建对象
	const xhr = new XMLHttpRequest();
	//2.初始化
	xhr.open('GET','https://localhost:8080/login');
	//3.发送
	xhr.send();
	//4.处理响应结果
	xhr.onreadystatechaenge = function (){
		if(xhr.readyState === 4){
			//认定状态码200~300为成功时：
			if(xhr.status>=200 && xhr.status <300){
				//控制台输出响应体
				resolve(xhr.response)//传递值
			}else{
				reject(xhr.status)//传递值
			}		
		}
	}
	})
	//调用then方法
	p.then(
	//状态为 成功 时调用，value是resolve传出来的值
	(value) => {console.log(value)},
	//状态为 失败 时调用，reason是reject传出来的值
	(reason) => {console.log(reason)});
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

封装ajax案例

function get(url){
	return new Promise((resolve,reject)=>{
			//1.创建对象
			const xhr = new XMLHttpRequest();
			//2.初始化
			xhr.open('GET',url);
			//3.发送
			xhr.send();
			//4.处理响应结果
			xhr.onreadystatechaenge = function (){
				if(xhr.readyState === 4){
					//认定状态码200~300为成功时：
					if(xhr.status>=200 && xhr.status <300){
						//控制台输出响应体
						resolve(xhr.response)
					}else{
						reject(xhr.status)
					}		
				}
			}
		})
	//发送请求
	get('https://localhost:8080/login')
	.then(
	//状态为 成功 时调用
	(value) => {console.log(value)},
	//状态为 失败 时调用
	(reason) => {console.log(reason)});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4. 其他有关promise

async、async

async 一般用于修饰返回promise对象的函数
await 修饰promise 对象能直接拿到resolve的值

Promise的函数方法

属于函数对象不属于实例对象,即直接使用：Promise.方法名(参数)
1

（1）Promise.resolve方法（value）=>{}
参数value：成功数据或者promise对象
返回一个成功、失败的promise对象

（2）Promise.reject方法 （reason）=>{}
参数reason：失败的原因
返回一个失败的promise对象

（3）Promise.all方法 （promise）=>{}
参数promise：包含n个promise数组
返回一个新的promise对象，所有成功即成功

（4）Promise.race方法 （promise）=>{}
参数promise：包含n个promise数组
返回一个新的promise对象,第一个完成的状态是最终状态

let p1 = new promise((resolve,reject)=>{
	resolve('OK1') //成功
})
let p2 = Promise.resolve('OK2') //成功
let p3 = Promise.reject('error3') //失败
let p4 = Promise.all([p1,p2,p3]) //失败
let p4 = Promise.race([p1,p2,p3]) //成功

1
2
3
4
5
6
7
8