Callback

Example

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

JSON type

// get article list
// http://localhost:1337/api/article
[
  {
    "id": 1,
    "title": "post 1"
  },
  {
    "id": 2,
    "title": "post 2"
  },
  {
    "id": 3,
    "title": "post 3"
  }
]

// get article information
// http://localhost:1337/api/articleInfo/1
{
    "id": 1,
    "authorId": 2,
    "content": "今天天氣真好"
}

// get author information
// http://localhost:1337/api/author/2
{
    "id": 2,
    "name": "Deleav",
    "email": "[email protected]"
}

AJAX function

// 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": "[email protected]"
}

Promise

  • 在 return 值外面包一層 Promise
  • Promise 是個物件，有許多的 method 能夠使用（ ex: then, catch...等 ）
// 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: "post"
        }).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": "[email protected]"
}

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 )
});

Async and await

  • 一定要用 Promise 包起來才能夠使用
  • 想要用 await 一定要加 async
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 );
}

DEMO

results matching ""

    No results matching ""