HelloJS - Week 2

 邱俊霖

Deleav

[dɪˋliv]

• exma-square

  • Node.js
  • Sails.js

JavaScript

Outline

• Let
• Callback
• Promise
• Arrow function
• Async and await

ES6

ECMAScript 6

ES 2015

• variable
• array
• function
• for..., while...
• scope

var

var b = 1;
while ( b > 0 ) {
    var a = 1;
    b = 0;
} // while()

console.log( a ); // 1

let

let b = 1;

while ( b > 0 ) {
    let a = 1;
    b = 0;
} // while()

console.log( a ); // undefined

Callback

function Add( num, callback ) {
    num = num + 1;
    callback( num );
}


Add( 2, function( ans ) {
    console.log( ans ); // 3
});

Why we need it?

• 為了防止資料還沒收到就結束程式或回傳參數
• 最常使用的地方
  • Ajax
  • Call api
  • Search DB

// get article list

[
  {
    "id": 1,
    "title": "post 1"
  },
  {
    "id": 2,
    "title": "post 2"
  },
  {
    "id": 3,
    "title": "post 3"
  }
]

// get article information

{
    "id": 1, 
    "authorId": 2, 
    "content": "今天天氣真好"
}

// get author information

{
    "id": 2, 
    "name": "Deleav", 
    "email": "deleav@gmail.com"
}

// get article list

function getArticleList( callback ) {
    $.ajax({
        url: "/api/article",
        type: "get"
    }).done(function( articleList ) {
        callback( articleList );
    });
}

// get article

function getArticle( id, callback ) {
    $.ajax({
        url: "/api/articleInfo/" + id,
        type: "get"
    }).done(function( article ) {
        callback( article );
    });
}

// get author name

function getAuthor( authorId, callback ) {
    $.ajax({
        url: "/api/author/" + authorId, 
        type: "get"
    }).done(function( authorInfo ){
        callback( authorInfo );
    });
}

// get article list

function getArticleList( callback ) {
    $.ajax({
        url: "/api/article",
        type: "get"
    }).done(function( articleList ) {
        callback( articleList );
    });
}


getArticleList(function( articleList ) {
    console.log( articleList );
});

// get article list

[
  {
    "id": 1,
    "title": "post 1"
  },
  {
    "id": 2,
    "title": "post 2"
  },
  {
    "id": 3,
    "title": "post 3"
  }
]

// get article list

function getArticleList( callback ) {
    $.ajax({
        url: "/api/article",
        type: "get"
    }).done(function( articleList ) {
        callback( articleList );
    });
}

// get article

function getArticle( id, callback ) {
    $.ajax({
        url: "/api/articleInfo/" + id,
        type: "get"
    }).done(function( article ) {
        callback( article );
    });
}

getArticleList(function( articleList ) {
    getArticle(articleList[0].id, function( articleInfo ) {
        console.log( articleInfo );
    });
});

// get article information

{
    "id": 1, 
    "authorId": 2, 
    "content": "今天天氣真好"
}

getArticleList(function( articleList ) {
    getArticle(articleList[0].id, function( articleInfo ) {
        getAuthor(articleInfo.arthorId, function( arthorInfo ) {
            console.log( arthorInfo );
        });
    });
});

// get author information

{
    "id": 2, 
    "name": "Deleav", 
    "email": "deleav@gmail.com"
}

Promise

// get article list

function getArticleList( callback ) {
    return new Promise(function( resolve, reject ) {
        $.ajax({
            url: "/article",
            type: "get"
        }).done(function( articleList ) {
            return resolve( articleList );
        });
    }
}

// get article

function getArticle( id, callback ) {
    return new Promise(function( resolve, reject ) {
        $.ajax({
            url: "/articleInfo/" + id,
            type: "get"
        }).done(function( article ) {
            return resolve( article );
        });
    }
}

// get author name

function getAuthor( authorId, callback ) {
    return new Promise(function( resolve, reject ) {
        $.ajax({
            url: "/author/" + authorId, 
            type: "get"
        }).done(function( authorInfo ){
            return resolve( authorInfo );
        });
    }
}

// 原本
getArticleList(function( articleList ) {
    getArticle(articleList[0].id, function( articleInfo ) {
        getAuthor(articleInfo.arthorId, function( arthorInfo ) {
            console.log( arthorInfo );
        });
    });
});

// Promise ( ES6 )
getArticleList().then(function( articleList ) {
    return getArticle( articleList[0].id );
}).then(function( article ) {
    return getArticle( article.authorId );
}).then(function( authorInfo ) {
    console.log( authorInfo );
});

// result

{
    "id": 2, 
    "name": "Deleav", 
    "email": "deleav@gmail.com"
}

Arrow function

=>

// Promise ( ES6 )
getArticleList().then(function( articleList ) {
    return getArticle( articleList[0].id );
}).then(function( article ) {
    return getArticle( article.authorId );
}).then(function( authorInfo ) {
    console.log( authorInfo );
});

// Promise + arrow function ( ES6 )
getArticleList()
.then( articleList => getArticle( articleList[0].id ))
.then( article => getArticle( article.authorId ))
.then( authorInfo => { 
    console.log( authorInfo )
});

// Promise ( ES6 )
getArticleList().then(function( articleList ) {
    return getArticle( articleList[0].id );
}).then(function( article ) {
    return getArticle( article.authorId );
}).then(function( authorInfo ) {
    console.log( authorInfo );
});



// Promise + arrow function ( ES6 )
getArticleList()
.then( articleList => getArticle( articleList[0].id ))
.then( article => getArticle( article.authorId ))
.then( authorInfo => { 
    console.log( authorInfo )
});

Babel

http://babeljs.io/repl/

Async and await

async function() {
    var articleList = await getArticleList();
    var article = await getArticle(articleList[0].id);
    var authorInfo = await getAuthor(article.authorId);
    console.log( arthorInfo );
}

async () => {
    var articleList = await getArticleList();
    var article = await getArticle(articleList[0].id);
    var authorInfo = await getAuthor(article.authorId);
    console.log( arthorInfo );
}