ES6中的Promise和Generator详解

前端开发 作者: 2024-08-21 11:15:02
简介 ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性。 Promise 什么是Promi

简介

Promise

  1. 对象的状态不受外界影响。
  1. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。
var promise = new Promise(function(resolve,reject) { 
// ... some code 
if (/* 异步操作成功 */){ 
resolve(value); 
} else { reject(error); } 
}
);
promise.then(function(value) { 
// success 
},function(error) { 
// failure }
);
function timeout(ms){
    return new Promise(((resolve,reject) => {
        setTimeout(resolve,ms,'done');
    }))
}

timeout(100).then(value => console.log(value));
let promise = new Promise(((resolve,reject) => {
    console.log('Step1');
    resolve();
}));

promise.then(() => {
    console.log('Step3');
});

console.log('Step2');

输出:
Step1
Step2
Step3
getJSON("/users.json").then(function(json){
    return json.name;
}).then(function(name){
    console.log(name);
});
getJSON("/users.json").then(function(json){
    return json.name;
}).catch(function(error){
    console.log(error);
});
getJSON("/users.json").then(function(json){
    return json.name;
}).then(function(name){
    console.log(name);
}).catch(function(error){
    //处理前面所有产生的错误
    console.log(error);
});
var p = Promise.all([p1,p2,p3]);
  1. 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
  2. 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
var p = Promise.race([p1,p3]);
Promise.resolve('js');
//等价于
new Promise(resolve => resolve('js'));
  1. 参数是一个Promise实例
  2. 参数是一个thenable对象
  3. 参数不是具有then方法的对象,或根本就不是对象
  4. 不带有任何参数
var p = Promise.reject('error');
//等价于
var p = new Promise((resolve,reject) => reject('error'));
asyncFunc().then(f1).catch(f2).then(f3).done();
server.listen(1000).then(function(){
    //do something
}.finally(server.stop);

Generator

function * helloWorldGenerator(){
    yield 'hello';
    yield 'world';
    return 'ending';
}

var gen = helloWorldGenerator();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

{ value: 'hello',done: false }
{ value: 'world',done: false }
{ value: 'ending',done: true }
function * f() {
    for( let i =0; true; i++){
        let reset = yield i;
        if(reset){
            i = -1;
        }
    }
}

let g = f();
console.log(g.next());
console.log(g.next());
console.log(g.next(true));
{ value: 0,done: false }
{ value: 1,done: false }
{ value: 0,done: false }
function * f2(x){
    var y = 2 * ( yield ( x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var r1= f2(5);
console.log(r1.next());
console.log(r1.next());
console.log(r1.next());

var r2= f2(5);
console.log(r2.next());
console.log(r2.next(12));
console.log(r2.next(13));
{ value: 6,done: false }
{ value: NaN,done: true }

{ value: 6,done: false }
{ value: 8,done: false }
{ value: 42,done: true }
function * a1(){
    yield 'a';
    yield 'b';
}

function * b1(){
    yield 'x';
    a1();
    yield 'y';
}

for(let v of b1()){
    console.log(v);
}
x
y
function * a1(){
    yield 'a';
    yield 'b';
}

function * b1(){
    yield 'x';
    yield * a1();
    yield 'y';
}

for(let v of b1()){
    console.log(v);
}
x
a
b
y
function * ajaxCall(){
    let result = yield request("http://www.flydean.com");
    let resp = JSON.parse(result);
    console.log(resp.value);
}

function request(url){
    makeAjaxCall(url,function(response){
        it.next(response);
    });
}

var it = ajaxCall();
it.next();

Generator 的异步应用

fs.readFile(fileA,'utf-8',function(error,data){
    fs.readFile(fileB,data){
}
})
let readFile = require('fs-readfile-promise');
readFile(fileA).then(function(){
    return readFile(fileB);
}).then(function(data){
    console.log(data);
})
function f(m){
    return m * 2;
}

f(x + 5);
var thunk = function () {
    return x + 5;
}
function f(thunk){
    return thunk() * 2;
}
fs.readFile(filename,[encoding],[callback(err,data)])
fs.readFile(fileA,callback);
var Thunk = function (fn){
    return function (...args){
        return functon (callback){
            return fn.call(this,...args,callback);
        }
    }
}

var readFileThunk = Thunk(fs.readFile);
readFileThunk(fileA)(callback);
let fs = require('fs');
let thunkify = require('thunkify');
let readFileThunk = thunkify(fs.readFile);

let gen = function * (){
    let r1 = yield readFileThunk('/tmp/file1');
    console.log(r1.toString());

    let r2 = yield readFileThunk('/tmp/file2');
    console.log(r2.toString());
}

let g = gen();

function run(fn){
    let gen = fn();

    function next (err,data){
        let result = gen.next(data);
        if(result.done) return;
        result.value(next);
    }
    next();
}

run(g);

总结

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66060.html