fetchのコールバックの書き方

2018-06-17

fetchのコールバックの書き方は特に何も考えずに毎回thenで繋げて書いていました。
そんなときに、headerの値をjsonに追加して返すものを書いてみると、変数で保持しないといけないのでスマートではないと感じていました。

let total, totalPages

fetch(url).then(response => {
    if (!response.ok) {
        return Promise.reject(response);
    }
    
    total = parseInt(response.headers.get('X-WP-Total'), 10)
    totalPages = parseInt(response.headers.get('X-WP-TotalPages'), 10)
    
    return response.json()
}).then(json => {
    // ...
    json.total = total
    json.totalPages = totalPages
    // ...
    return json
})

そこで見つけた書き方がこちらです。

// https://github.com/netlify/netlify-cms/blob/master/src/backends/github/API.js

parseJsonResponse(response) {
    return response.json().then((json) => {
        if (!response.ok) {
            return Promise.reject(json);
        }

        return json;
    });
}

スマート！
この方法を真似すれば一番最初のコードもスマートになりそうなので書き直してみました。

fetch(url).then(response => {
    return response.json().then(json => {
        if (!response.ok) {
            return Promise.reject(json);
        }
        // ...
        json.total = parseInt(response.headers.get('X-WP-Total'), 10);
        json.totalPages = parseInt(response.headers.get('X-WP-TotalPages'), 10);
        // ...
        return json;
    });
});

これで変数を使わずにかけるようになりました。

netlify-cmsのbitbucket対応はバージョン2.0で入りそうな感じでした。楽しみです。 https://github.com/netlify/netlify-cms/pull/525