ECMAScript 6 入门 (Day11)
11.1 Promise对象
11.1.1 Promise的含义
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件（更合理和更强大）。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
11.1.2 Promise对象特点
1、 对象的状态不受外界影响
Promise对象代表一个异步操作，对象的状态不受外界影响。
有三种状态：
pending（初始状态）
fulfilled（操作成功）
rejected（操作失败）
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2、 一旦状态改变，就不会再变，任何时候都可以得到这个结果
一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：
- 从
pending（进行中）变为fulfilled（已成功） - 从
pending（进行中）变为rejected（已失败）
11.1.3 Promise 基本用法
1、promise实例
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
下面代码创造了一个Promise实例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve(value)函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject(value)函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
2、promise.prototype.then()
then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。其中，第二个函数是可选的，不一定要提供。
promise.then(function(res){
...},function(err){
...})
promise.then(function(value) {
// success
console.log('resolved.');
}, function(error) {
// failure
console.log('rejected.');
});
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
3、promise.prototype.catch()
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误！', error);
});
Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});
上面代码中，一共有三个 Promise 对象：一个由getJSON()产生，两个由then()产生。它们之中任何一个抛出的错误，都会被最后一个catch()捕获。
一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。
// bad
promise.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise.then(function(data) {
//cb
// success
})
.catch(function(err) {
// error
});
上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议总是使用catch()方法，而不使用then()方法的第二个参数。
4、Promise.prototype.finally()
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
promise
.then(result => {
···})
.catch(error => {
···})
.finally(() => {
···});
上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
使用 Promise优点：
不同于“老式”的传入回调，在使用 Promise 时，会有以下约定：
- 在本轮 事件循环 运行完成之前，回调函数是不会被调用的。
- 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。
- 通过多次调用 then() 可以添加多个回调函数，它们会按照插入顺序执行。
- Promise 很棒的一点就是链式调用（chaining）。
Catch 的后续链式操作
有可能会在一个回调失败之后继续使用链式操作，即 使用一个 catch，这对于在链式操作中抛出一个失败之后，再次进行新的操作很有用。请阅读下面的例子：
new Promise((resolve, reject) => {
console.log('初始化'); //1
resolve();
})
.then(() => {
throw new Error('有哪里不对了'); //2
console.log('执行「这个」”');
})
.catch(() => {
console.log('执行「那个」');//3
})
.then(() => {
console.log('执行「这个」，无论前面发生了什么');//4
});
输出结果如下：
初始化
执行“那个”
执行“这个”，无论前面发生了什么
注意：因为抛出了错误 有哪里不对了，所以前一个 执行「这个」 没有被输出。
5、Promise.all()
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
6、Promise.race()
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
7、Promise.resolve()
Promise.resolve()可以将现有对象转为 Promise 对象。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
8、Promise.reject()
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
console.log(s)
});
// 出错了
11.1.4 Promise的应用
1、加载图片
我们可以将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
2、压缩图片
getBase64(file, isCompress) {
//文件，是否需要压缩
//把图片转成base64编码
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
// console.log(reader.result);//压缩前
if (isCompress) {
let img = new Image(); //创建图片对象
img.src = reader.result;
img.onload = function() {
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
var imageWidth = undefined;
var imageHeight = undefined;
if (img.width >= 4000) {
imageWidth = img.width / 6; //压缩后图片的大小
imageHeight = img.height / 6;
} else if (img.width >= 3000) {
imageWidth = img.width / 5; //压缩后图片的大小
imageHeight = img.height / 5;
} else if (img.width >= 2000) {
imageWidth = img.width / 3; //压缩后图片的大小
imageHeight = img.height / 3;
} else if (img.width >= 1000) {
imageWidth = img.width / 2; //压缩后图片的大小
imageHeight = img.height / 2;
} else {
imageWidth = img.width; //压缩后图片的大小
imageHeight = img.height;
}
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(img, 0, 0, imageWidth, imageHeight);
imgResult = canvas.toDataURL("image/jpeg"); //压缩完成
// console.log(imgResult)
resolve(imgResult); //resolve成功返回压缩后的图片base64
};
} else {
imgResult = reader.result;
resolve(imgResult);//不需要压缩的原图片base64
}
};
reader.onerror = function(error) {
reject(error);
};
// reader.onloadend = function() {
// resolve(imgResult);
// };
});
},
AddUploadFileChange(file, fileList) {
//添加广告 上传控件file 改变
let isCompress = true;
if (file.size < 600 * 1024) {
//小于600KB,不需要压缩
// return this.$message.error("请上传小于600KB的图片文件");
isCompress = false;
this.getBase64(file.raw, isCompress).then(result => {
// console.log(result);
this.addForm.imgBase64 = result;
});
} else {
//大于600KB,需要压缩
isCompress = true;
this.getBase64(file.raw, isCompress).then(result => {
// console.log(result);
this.addForm.imgBase64 = result;
});
}
}
注意：() => x 是 () => { return x; } 的简写。
11.2 async 函数
与普通函数的区别
- 普通函数返回的是字符串
async函数返回的是一个Promise对象，resolved返回值是‘abc’
function fn(){
return 'abc'
}
fn();
async function fn1(){
return 'abc'
//相当于
//return new Promise((resolve)=>{
resolve('abc')})
}
fn1();
11.2.1 async 函数的含义
async 函数是什么？一句话，它就是 Generator 函数的语法糖
前文有一个 Generator 函数，依次读取两个文件。
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
上面代码的函数gen可以写成async函数，就是下面这样。
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。
11.2.2 Async/await 使用方法
async函数返回一个Promise 对象await命令后面跟着一个Promise 对象
1、async函数
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});
函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象，所以用then函数可以得到返回值
2、await 命令
await命令后面无论跟着的是普通函数还是Promise，都会阻塞后面的代码，等主程序执行完，才接着执行。
async function f1(){
return new Promise((resolve,reject)=>{
setTimeOut(()=>{
resolve('abc')
},3000);
});
}
function f2(){
return 'F2';
}
async function fn3(){
// let a=await f1();
let b=await f2();
//阻塞
console.log('啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
}
fn3();
正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果 。如果不是 Promise 对象，就直接返回对应的值。
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
上面代码中，await命令的参数是数值123，这时等同于return 123。
3、错误处理
如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了
如果有多个await命令，可以统一放在try...catch结构中。
async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
4、实际应用
async getAdList() {
// 获取广告列表
this.loading=true;
const {
data: res } = await this.$axios.post(
"adrotation/list/" +
this.queryInfo.pagenum +
"/" +
this.queryInfo.pagesize
);
console.log(res);
this.loading=false;
if (res.code !== 200) {
this.tableData=[];
return this.$message.error("获取广告列表失败！");
}
this.tableData = res.data;
}
拓展： reduce()方法
-
reduce()方法用于对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供
-
语法：
array.reduce(callback[, value]) -
参数
array: 必传，一个数组对象
callback: 必传，对于数组中的每个元素，reduce方法都会调用一次callback函数
value: 可选，如果指定value，它将作为初始值来启动积累。第一次调用callback函数会将此值作为参数 -
返回值
通过最后一次调用回调函数获得的累积结果
使用 async/await 可以解决Promise写法上的大多数错误，使用 async/await 时，别忘记了 await 关键字。
参考链接：