Promise - “承诺”
Promise 是ES6对异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。
Promise 简单说就是一个容器,里面保存着一个尚未完成且预计在未来完成的异步操作。
Promise 是一个构造函数,用来创建一个Promise对象。
Promise对象代表一个异步操作,有三种状态:
pending(进行中)
fulfilled(成功)
rejected(失败)
Promise 对象的状态改变有两种:
从 pending 变为 fulfilled
从 pending 变为 rejected
一旦状态改变,就不会再变,任何时候都可以得到这个结果。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
var p = new Promise(function(resolve, reject) {
// do something ...
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。
resolve 和 reject 是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve 函数的作用是,将Promise对象的状态从“进行中”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
reject 函数的作用是,将Promise对象的状态从“进行中”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
p.then(function(value) {
// success
}, function(error) {
// failure 可选
});
Promise实例的then方法:
第一个参数是resolved状态的回调函数
第二个参数(可选)是rejected状态的回调函数
方法返回的是一个新的Promise实例
Promise实例的catch方法:用于指定发生错误时的回调函数,可以捕获then里面的错误。
throw new Error(‘出错啦’);
不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数。
Promise.all 可以将多个Promise实例包装成一个新的Promise实例。
1.它接受一个数组作为参数。
2.数组可以是Promise对象,也可以是其它值,只有Promise会等待状态改变。
3.当所有的子Promise都完成,该Promise完成,返回值是全部值的数组。
Promise.all([p1,p2,p3]).then(function (arr){
console.log(arr);
},function (error){
console.log(error);
});
Promise.race 类似于Promise.all,区别在于它有任意一个完成就算完成(无论成功或失败)
1.Promise 改造 函数嵌套
2.Promise 改造 ajax嵌套依赖
Generator 遍历器生成函数
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。
语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
形式上,Generator 函数是一个普通函数,但是有两个特征:
一是,function关键字与函数名之间有一个星号 *;二是,函数体内部使用yield表达式,定义不同的内部状态(yield 即“产出”)。
// Generator 遍历器生成函数
function* myGenerator(){
yield 'hello';
yield 'world';
yield 'result';
}
var iterator = myGenerator();
console.log( iterator ); // 遍历器对象(Iterator Object)
console.log( iterator.next() ); // {value: "hello", done: false}
console.log( iterator.next() ); // {value: "world", done: false}
console.log( iterator.next() ); // {value: "result", done: false}
console.log( iterator.next() ); // {value: undefined, done: true}
执行 Generator 函数会返回一个遍历器对象,是一个遍历器对象生成函数。
每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。
value表示当前的内部状态的值,是yield后面那个表达式的值;done是一个布尔值,表示是否遍历结束。
Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,其实是提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
for…of循环,扩展运算符(…)等方法,内部调用的都是遍历器接口。
任意一个对象的Symbol.iterator方法(数组,字符串, Set,Map,元素集合,arguments),等于该对象的遍历器生成函数( Generator),调用该函数会返回该对象的一个遍历器对象。
原生js对象不具备 Iterator 接口,无法使用上述接口,将 Generator 函数加到对象的Symbol.iterator属性上面即可使用。
function* objGenerator() {
let keys = Object.keys(this); // ["name", "sex", "aeg"]
for (let key of keys) {
yield [key, this[key]]; // [key,value]
}
}
let xmObj = {
name: 'xiaoming', sex: '男', aeg: 23 };
// 将 Generator 函数加到对象的Symbol.iterator属性上面
xmObj[Symbol.iterator] = objGenerator;
for (let [key, value] of xmObj) {
// 可以使用for/of遍历
console.log(`${
key}: ${
value}`);
}
// name: xiaoming
// sex: 男
// aeg: 23
async和await
async 函数是什么?一句话,它就是 Generator 函数的语法糖。
async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await …
async和await,比起星号和yield,语义更清楚了。
async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
async函数返回一个 Promise 对象,可以使用then方法添加回调函数。
async函数内部return语句返回的值,会成为then方法回调函数的参数。
async function fn() {
return 'hello world';
}
fn().then(v => console.log(v)); // "hello world"
console.log('我先执行'); // "我先执行"
console.log( fn() ); // Promise {<resolved>: "hello world"}
async 函数有多种使用形式。
// 函数声明
async function foo() {
}
// 函数表达式
let foo = async function () {
};
// 对象的方法
let obj = {
async foo() {
} };
obj.foo().then(...)
// Class 的方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${
name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭头函数
let foo = async () => {
};
// 立即执行函数
(async function (){
// ...
})();
async函数内部抛出错误,导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function fn() {
throw new Error('出错了');
}
fn().then(
v => console.log(v),
e => console.log(e) // catch Error: 出错了
)
await 命令
正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。
async function fn() {
return await 123;
// 等同于
// return 123;
}
fn().then( v => console.log(v) );
// 123
上面代码中,await命令的参数是数值123,这时等同于return 123。
注意,await一定要运行在async 函数内!
当async函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
(async function (){
var res1 = await new Promise(function (resolve,reject){
setTimeout(function (){
console.log('异步任务1');
resolve('成功1');
},1000);
});
var res2 = await new Promise(function (resolve,reject){
setTimeout(function (){
console.log('异步任务2');
resolve('成功2');
},1000);
});
console.log(res1,res2);
console.log('同步任务3');
console.log('同步任务4');
})();
await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来。
await命令后面的 Promise 对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。
async function fn() {
await Promise.reject('出错了');
}
fn().then(v => console.log(v)).catch(e => console.log(e))
// 出错了
任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。
async function fn() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
fn().then(
v => console.log(v),
err => console.log(err)
);
// '出错了'
await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try…catch代码块中。
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
console.log(e);
}
return await Promise.resolve('hello world');
}
f().then(v => console.log(v));
// hello world
async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。
(async function (){
var res1 = await promiseAjax({
type: 'get',
url: 'datas.php',
data: 'userid=abc1001'
});
var res2 = await promiseAjax({
type: 'get',
url: 'datas.php',
data: 'userid=abc1002'
});
var res3 = await promiseAjax({
type: 'get',
url: 'datas.php',
data: 'userid=abc1003'
});
res1 = JSON.parse(res1);
res2 = JSON.parse(res2);
res3 = JSON.parse(res3);
// con.innerHTML = `姓名:${res1.name},身份证:${res2.idcode},地址:${res3.address}`;
return `姓名:${
res1.name},身份证:${
res2.idcode},地址:${
res3.address}`;
})().then(val=>{
con.innerHTML = val;
});
fetch 与 axios
fetch:号称是AJAX的替代品,是基于promise设计的。
fetch不是ajax的进一步封装,而是原生js,代码结构比起ajax简单多了。
axios:是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
vue官方推荐的HTTP请求库。