前端臨牀手扎——簡單易用的fetch

如題，es6 新增的fetch真的簡單易用，感受如今這一個支持徹底可行。

雖然兼容性問題仍是存在，可是打上polyfill後就基本解決了。

Browser Support

Chrome
Firefox
Safari 6.1+
Internet Explorer 10+

來自：github / fetch

使用

簡單使用

這裏說明一下，fetch必須配合promise一塊兒使用，這會獲得更佳效果。

# get 
fetch('/api/user/1', {method: 'GET'}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {id: 1, username: 'Packy', email: 'packy@uxfeel.com'}

# post
var formData = new FormData();
formData.append('username', 'cathy');
formData.append('email', 'cathy@uxfeel.com');

fetch('/api/user', {method: 'POST', body: formData}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {code: '0', msg: '', data:{}}

跨域

跨域問題並不難只需加上 mode:'cors' 參數，如：

# cross post
var formData = new FormData();
formData.append('username', 'cathy');
formData.append('email', 'cathy@uxfeel.com');

fetch(
    'http://192.168.1.120/api/user', 
    {
        method: 'POST',
        body: formData,
        // 設爲跨域請求
        mode:'cors'
    }
).then(res => res.json).then(console.log).catch(console.error);

想詳細瞭解,請記住CORS關鍵詞並看這裏

你可能還須要...

想使用起來更舒心，你還得引用如下這兩個包解決兼容：

• es6-promise

• url-search-params

具體使用例子：

# api.js

require('es6-promise').polyfill();
require('fetch');

// 此判斷在某些瀏覽器並不能正常檢查，致使URLSearchParams不可用，若是你知道具體問題聯繫如下博主
//if ('searchParams' in HTMLAnchorElement.prototype) {
    var URLSearchParams = require('url-search-params');
//}

function handle(response){
    return new Promise(function(resolve, reject){
        if(response.status === 200){
            resolve(response.json())
        }else{
            var message = defaults.serverError[response.status];
            var e = new Error(message || '未知請求錯誤！');
            e.response = response;
            reject(e);
        }
    });
}

module.exports = {
    // 登陸
    login: function(data){
        var url = '/user/login';

        var formData = new FormData();
        Object.keys(data).map(function(attr){
            formData.append(attr, data[attr]);
        })

        return fetch(url, {
            method: 'POST',
            body: formData,
        }).then(handle).catch(handle);
    },
    // 發送手機驗證短信
    sendCode: function(data){
        var url = '/user/sendCode';

        var params = new URLSearchParams('');
        Object.keys(data).map(function(attr){
            params.append(attr, data[attr]);
        })

        url+='?'+params.toString();

        return fetch(url, {
            method: 'GET',
        }).then(handle).catch(handle)
    }
}