xgqfrms commented 6 years ago

Fetch & POST & JSON Server

before

after

JSON Server


const fetchPOSTJSON = (url = ``, obj = {}) => {
    return fetch(url,
        {
            method: "POST",
            mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify(obj),
        }).then(res => res.json())
        .then(
            (json) => {
                console.log(`POST configs OK!`);
                return json;
            }
        ).catch(err => console.log(`fetch error & POST configs Error!`, err));
};

// async / await
async function getPOSTDatas(url = ``, obj = {}) {
    try {
        return await fetchJSON(url, obj);
    } catch (err) {
        console.error("getDatas error:\n", err);
    }
}


let obj = {
        "id": "fb-hc",
        "config": {
            "width": "1024",
            "height": "300",
        }
    };

fetchPOSTJSON(`http://10.1.5.202:7777/componentConfig`, obj);

xgqfrms commented 6 years ago

HTTP method & GET POST PUT PATCH DELETE OPTIONS

PUT vs PATCH ?

OPTIONS ?

update all `vs` update partly

https://stackoverflow.com/questions/24241893/rest-api-patch-or-put

https://laracasts.com/discuss/channels/general-discussion/whats-the-differences-between-put-and-patch?page=1

http://restcookbook.com/HTTP%20Methods/patch/

https://restful-api-design.readthedocs.io/en/latest/methods.html

https://philsturgeon.uk/api/2016/05/03/put-vs-patch-vs-json-patch/

xgqfrms commented 6 years ago


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description POST & Fetch
 *
 * @augments
 * @example
 *
 */

const fetchPOSTJSON = (url = ``, obj = {}) => {
    return fetch(url,
        {
            method: "POST",
            mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify(obj),
        }).then(res => res.json())
        .then(
            (json) => {
                console.log(`POST configs OK!`);
                return json;
            }
        ).catch(err => console.log(`fetch error & POST configs Error!`, err));
};

// async / await
async function getPOSTDatas(url = ``, obj = {}) {
    try {
        return await fetchJSON(url, obj);
    } catch (err) {
        console.error("getDatas error:\n", err);
    }
}

const fetchPUTJSON = (url = ``, obj = {}) => {
    return fetch(url,
        {
            method: "PUT",
            mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            body: JSON.stringify(obj),
        }).then(res => res.json())
        .then(
            (json) => {
                console.log(`PUT configs OK!`);
                return json;
            }
        ).catch(err => console.log(`fetch error & PUT configs Error!`, err));
};

// Error
// fetchPUTJSON(`http://10.1.5.202:7777/componentConfig?id=fb-hc`, obj);

// OK & PS: id can not be changed!
// fetchPUTJSON(`http://10.1.5.202:7777/componentConfig/fb-hc`, obj);

const fetchDeleteJSON = (url = ``) => {
    return fetch(url,
        {
            method: "DELETE",
            mode: "cors",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
        }).then(res => res.json())
        .then(
            (json) => {
                console.log(`DELETE configs OK!`);
                return json;
            }
        ).catch(err => console.log(`fetch error & DELETE configs Error!`, err));
};

// fetchDeleteJSON(`http://10.1.5.202:7777/componentConfig/fb-hc`);

xgqfrms commented 6 years ago

Window.scrollTo() & Element.scrollTop()

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

xgqfrms commented 6 years ago

class & attributes

xgqfrms commented 6 years ago


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description AuoScroll
 * @augments
 * @example
 *
 */

const AuoScroll = (datas = [], debug = false) => {
    let result = ``;
    // do something...
    return result;
};

let tableBox = document.querySelector(`[class="infos-table-box"]`),
    table = document.querySelector(`[data-box="progress"]`);
tableBox.scrollTop = table.clientHeight;
// tableBox.scrollTop = table.offsetHeight;

// window.scrollTo(x, y);
// table.scrollTo(0, 10000);
// tableBox.scrollTop = 100000;
// table.clientHeight;
// table.offsetHeight;

// export default AuoScroll;

// export {
//     AuoScroll,
// };

xgqfrms commented 6 years ago