Promise⼊门详解和基本⽤法
异步
JavaScript的执⾏环境是单线程。
所谓单线程，是指JS引擎中负责解释和执⾏JavaScript代码的线程只有⼀个，也就是⼀次只能完成⼀项任务，这个任务执⾏完后才能执⾏下⼀个，它会「阻塞」其他任务。这个任务可称为主线程。
异步模式可以⼀起执⾏多个任务。
常见的异步模式有以下⼏种：
定时器
接⼝调⽤
事件函数
今天这篇⽂章，我们重点讲⼀下接⼝调⽤。接⼝调⽤⾥，重点讲⼀下Promise。
接⼝调⽤的⽅式
js 中常见的接⼝调⽤⽅式，有以下⼏种：
原⽣ajax
基于jQuery的ajax
Fetch
Promise
axios
多次异步调⽤的依赖分析
多次异步调⽤的结果，顺序可能不同步。
异步调⽤的结果如果存在依赖，则需要嵌套。
在ES5中，当进⾏多层嵌套回调时，会导致代码层次过多，很难进⾏维护和⼆次开发；⽽且会导致回调地狱的问题。ES6中的Promise 就可以解决这两个问题。
Promise的介绍和优点
ES6中的Promise 是异步编程的⼀种⽅案。从语法上讲，Promise 是⼀个对象，它可以获取异步操作的消息。
Promise对象, 可以将异步操作以同步的流程表达出来。使⽤ Promise 主要有以下好处：
可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
语法⾮常简洁。Promise 对象提供了简洁的API，使得控制异步操作更加容易。
回调地狱的举例
假设买菜、做饭、洗碗都是异步的。
但真实的场景中，实际的操作流程是：买菜成功之后，才能开始做饭。做饭成功后，才能开始洗碗。这⾥⾯就涉及到了多层嵌套调⽤，也就是回调地狱。
（1）使⽤new实例化⼀个Promise对象，Promise的构造函数中传递⼀个参数。这个参数是⼀个函数，该函数⽤于处理异步任务。
（2）并且传⼊两个参数：resolve和reject，分别表⽰异步执⾏成功后的回调函数和异步执⾏失败后的回调函数；
（3）通过 promise.then() 处理返回结果。这⾥的 p 指的是 Promise实例。
代码举例如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 第⼀步：model层的接⼝封装
const promise = new Promise((resolve, reject) => {
// 这⾥做异步任务（⽐如ajax 请求接⼝。这⾥暂时⽤定时器代替）
setTimeout(function() {
var data = { retCode: 0, msg: 'qianguyihao' }; // 接⼝返回的数据
if (Code == 0) {
// 接⼝请求成功时调⽤
resolve(data);
} else {
// 接⼝请求失败时调⽤
reject({ retCode: -1, msg: 'network error' });
}
}, 100);
});
// 第⼆步：业务层的接⼝调⽤。这⾥的 data 就是从 resolve 和 reject 传过来的，也就是从接⼝拿到的数据
promise.then(data => {
// 从 resolve 获取正常结果
console.log(data);
}).catch(data => {
// 从 reject 获取异常结果
console.log(data);
});
</script>
</body>
</html>
上⽅代码中，当从接⼝返回的数据Code的值不同时，可能会⾛ resolve，也可能会⾛ reject，这个由你⾃⼰的业务决定。
3
初始化状态（等待状态）：pending
成功状态：fullfilled
失败状态：rejected
（1）当new Promise()执⾏之后，promise对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这⾏代码，括号⾥的内容是同步执⾏的。括号⾥定义⼀个function，function有两个参数：resolve和reject。如下：
如果请求成功了，则执⾏resolve()，此时，promise的状态会被⾃动修改为fullfilled。
如果请求失败了，则执⾏reject()，此时，promise的状态会被⾃动修改为rejected
（2）promise.then()⽅法，括号⾥⾯有两个参数，分别代表两个函数 function1 和 function2：
如果promise的状态为fullfilled（意思是：如果请求成功），则执⾏function1⾥的内容
如果promise的状态为rejected（意思是，如果请求失败），则执⾏function2⾥的内容
另外，resolve()和reject()这两个⽅法，是可以给promise.then()传递参数的。
完整代码举例如下：
let promise = new Promise((resolve, reject) => {
//进来之后，状态为pending
console.log('111');  //这⾏代码是同步的
//开始执⾏异步操作（这⾥开始，写异步的代码，⽐如ajax请求 or 开启定时器）
if (异步的ajax请求成功) {
console.log('333');
resolve('haha');//如果请求成功了，请写resolve()，此时，promise的状态会被⾃动修改为fullfilled
} else {
reject('555');//如果请求失败了，请写reject()，此时，promise的状态会被⾃动修改为rejected
}
})
console.log('222');
//调⽤promise的then()
promise.then((successMsg) => {
//如果promise的状态为fullfilled，则执⾏这⾥的代码
console.log(successMsg, '成功了');
}
//如果promise的状态为rejected，则执⾏这⾥的代码
console.log(errorMsg, '失败了');
}
)
实际开发中，我们经常需要同时请求多个接⼝。⽐如说：在请求完接⼝1的数据data1之后，需要根据data1的数据，继续请求接⼝2，获取data2；然后根据data2的数据，继续请求接⼝3。
这种场景其实就是接⼝的多层嵌套调⽤。有了 promise之后，我们可以把多层嵌套调⽤按照线性的⽅式进⾏书写，⾮常优雅。
也就是说：Promise 可以把原本的多层嵌套调⽤改进为链式调⽤。
代码举例：（多次 Ajax请求，链式调⽤）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
function queryData(url) {
var promise = new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
if (adyState != 4) return;
if (adyState == 4 && xhr.status == 200) {
// 处理正常情况
sponseText); // sponseText 是从接⼝拿到的数据
} else {
// 处理异常情况
reject('接⼝请求失败');
}
};
xhr.open('get', url);
xhr.send(null); // 请求接⼝
});
return promise;
}
// 发送多个ajax请求并且保证顺序
queryData('localhost:3000/api1')
.then(
data1 => {
console.log(JSON.stringify(data1));
// 请求完接⼝1后，继续请求接⼝2
return queryData('localhost:3000/api2');
},
error1 => {
console.log(error1);
}
)
.then(
data2 => {
console.log(JSON.stringify(data2));
// 请求完接⼝2后，继续请求接⼝3
return queryData('localhost:3000/api3');
},
error2 => {
console.log(error2);
}
)
.then(
data3 => {
// 获取接⼝3返回的数据
console.log(JSON.stringify(data3));
},
error3 => {
console.log(error3);
}
);
</script>
</body>
</html>
上⾯这个举例很经典，需要多看⼏遍。
return 后⾯的返回值，有两种情况：
情况1：返回 Promise 实例对象。返回的该实例对象会调⽤下⼀个 then。
情况2：返回普通值。返回的普通值会直接传递给下⼀个then，通过 then 参数中函数的参数接收该值。我们针对上⾯这两种情况，详细解释⼀下。
情况1：返回 Promise 实例对象
举例如下：（这个例⼦，跟上⼀段 Ajax 链式调⽤的例⼦差不多）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
ajax实例里面的函数<body>
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
function queryData(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
if (adyState != 4) return;
if (adyState == 4 && xhr.status == 200) {
/
/ 处理正常情况
sponseText);
} else {
// 处理异常情况
reject('接⼝请求失败');
}
};
xhr.open('get', url);
xhr.send(null); // 请求接⼝
});
}
// 发送多个ajax请求并且保证顺序
queryData('localhost:3000/api1')
.then(
data1 => {
console.log(JSON.stringify(data1));
return queryData('localhost:3000/api2');
},
error1 => {
console.log(error1);
}
)
.then(
data2 => {
console.log(JSON.stringify(data2));
// 这⾥的 return，返回的是 Promise 实例对象
return new Promise((resolve, reject) => {
resolve('qianguyihao');
});
},
error2 => {
console.log(error2);
}
)
.then(data3 => {
console.log(data3);
});
</script>
</body>
</html>
情况2：返回普通值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
function queryData(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
if (adyState != 4) return;
if (adyState == 4 && xhr.status == 200) {
// 处理正常情况
sponseText);
} else {
// 处理异常情况
reject('接⼝请求失败');
}
};
xhr.open('get', url);
xhr.send(null); // 请求接⼝
});
}
// 发送多个ajax请求并且保证顺序
queryData('localhost:3000/api1')
.then(
data1 => {
console.log(JSON.stringify(data1));
return queryData('localhost:3000/api2');
},
error1 => {
console.log(error1);
}
)
.then(
data2 => {
console.log(JSON.stringify(data2));
// 返回普通值
return 'qianguyihao';
},
error2 => {
console.log(error2);
}
)
/*
既然上⽅返回的是普通值，那么，这⾥的 then 是谁来调⽤呢？
答案是：这⾥会产⽣⼀个新的默认的 promise实例，来调⽤这⾥的then，确保可以继续进⾏链式操作。                */
.then(data3 => {
// 这⾥的 data3 接收的是普通值 'qianguyihao'
console.log(data3);
});
</script>
</body>
</html>
Promise ⾃带的API提供了如下实例⽅法：
promise.then()：获取异步任务的正常结果。
promise.catch()：获取异步任务的异常结果。
promise.finaly()：异步任务⽆论成功与否，都会执⾏。
代码举例如下。
写法1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。