ES6---基础知识（Promise知识点）

71 阅读 0 评论 47 点赞

我是靠谱客的博主优秀果汁，最近开发中收集的这篇文章主要介绍ES6---基础知识（Promise知识点），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Promise

一、简介：

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

二、目的：

为了解决嵌套的问题，ES6提供了几种解决方法

Promise ：最基础的掌握
Generator ：函数、高级、以Promise为基础、了解
async ：函数、更高级、以Promise为基础、了解

三、在vue中，会使用基于Promise的网络工具，axios内部装好了Promise和Http。

async属于异步操作，直接使用关键字就可以；
await等待网络请求执行完毕后结果返回给res

四、基本使用：

创建Promise对象，传递一个函数，函数的形参为resolve和reject

resolve和reject两个函数可以改变promise对象的状态；
如果调用resolve函数，promise对象就是成功的；
如果调用reject函数，promise对象就是失败的；

获取resolve和reject函数传递的数据

then方法相当于promise对象的方法，代表promise对象成功状态的回调函数
catch方法相当于promise对象的方法，代表promise对象失败状态的回调函数

<script>
//使用Promise的使用
//创建Promise对象，传递一个函数，函数的形参为reslove和reject
let promise = new Promise((resolve,reject) =>{
//reslove和reject为两个函数，可以改变promise对象的状态
//例子
if(3 < 5){
//如果resolve函数的调用，那么promise对象就是成功的 ，那么就传递一个参数出去
resolve("success");
}else{
//如果reject函数的调用，那么promise对象就是失败的
reject("error");
}
})
console.log(promise);
//获取resolve和reject函数传递的数据
promise.then( (res) => {//then方法相当于promise对象的方法，代表promise对象成功状态的回调函数
//res就是resolve传递出来的数据
console.log(res);
}).catch( (error) => {//catch方法相当于promise对象的方法，代表promise对象失败状态的回调函数
//error就是reject传递出来的数据
console.log(error);
})
</script>

五、Promise的异步操作

1、使用Promise处理网络请求，
2、

在ajax请求之后调用resolve函数，传递请求成功的数据res实参
在ajax请求之后调用reject函数，传递请求成功的数据err实参

3、异步操作结束后的操作，使用promise对象的then和catch方法

<script>
//使用promise处理网络请求，使用之前的接口
//这里面的promise就是一个异步存放操作的容器
let promise = new Promise( (resolve,reject) => {
//使用ajax
$.ajax({
url : "http://XX.XX.XX.XX:8099/manager/category/findAllCategory",
method : "get",
data : {},
success(res){
//在ajax请求之后调用resolve函数，传递请求成功的数据res实参
resolve(res)
},
error(err){
//在ajax请求之后调用reject函数，传递请求成功的数据err实参
reject(err);
}
})
})
console.log(promise);
//异步操作结束后进行的操作，使用promise对象的then和catch方法
//当前的promise.then与promise对象处于同一级，也就是异步编码，同步编写；
//当promise对象执行到success时，下面的then和catch
promise.then ( (response) => {
console.log(response);
}).catch( (error) => {
console.log(error);
})
</script>

六、Promise的封装

封装promise对象，方便异步操作。

<script>
//url method data 成功或失败的回调交给promise去做
function send(url ,method ,data){
//return一个promise对象
//因为执行这个封装的方法最后需要拿到的就是promise对象
return new Promise( (resolve,reject) => {
//使用ajax发送请求
$.ajax({
url : "",
method : "",
data : {},
success(res){
resolve(res);
},error(error){
reject(error);
}
})
})
}
// //调用封装好的promise对象
send("http://XX.XX.XX.XX:8099/manager/category/findAllCategory","get",{})
.then( (response) => {
console.log(response);
}).catch( (error) => {
console.log(error);
}).finally( () => {
console.log("获取栏目数据完成");
})
// //查找所有用户
send("http://47.106.244.1:8099/manager/user/fundAllUser","get",{})
.then( (response) => {
console.log(response);
}).catch( (error) => {
console.log(error);
}).finally( () => {
console.log("获取用户数据完成");
})
//另一种使用方法
let p1 =
send("http://XX.XX.XX.XX:8099/manager/category/findAllCategory","get",{});
let p2 = send("http://XX.XX.XX.XX:8099/manager/user/fundAllUser","get",{});
//让p1和p2同时发送请求
//Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
//合并p1和p2的结果，两个请求都完毕后一起将数据返回给p3
let p3 = Promise.all([p1,p2]);
p3.then( (response) => {
console.log(response);
}).catch( (error) => {
console.log(error);
});
//只要p2 p1的状态都变成fulfilled/resolved,p3的状态才会编程fulfilled;
//此时，p1,p2的返回值组成一个数组，传递给p3.
//只要有其中一个被rejected，p3的状态就是rejected，
//Promise.race() 赛跑 ，谁块用谁的结果
let p3 = Promise.race([p1,p2]);
p3.then( (response) => {
console.log(response);
}).catch( (error) => {
console.log(error);
});
//只要p1,p2之中有一个实例率先改变状态，p3的状态就跟着改变；
</script>