json-server

[xyzdata]

json-server

https://github.com/typicode/json-server

https://github.com/xgqfrms-GitHub/json-server

{
    "name": "test-db",
    "version": "1.0.0",
    "description": "json-server & fake/mock api",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "echo \"JSON-server ready running...\n\" && json-server --watch db.json",
        "infos": "echo JSON-server ready running...\n",
        "jsondb": "json-server --watch db.json --port 7777",
        "open": "start  http://localhost:7777/posts/1",
        "db": "npm run infos && npm run open && npm run jsondb"
    },
    "author": "xgqfrms",
    "license": "MIT",
    "devDependencies": {
        "json-server": "^0.12.0"
    }
}

[xyzdata]

https://github.com/xgqfrms-GitHub/json-server#可选择端口

[xyzdata]

fetch

http://localhost:7777/datas

{
    "posts": [
        {
        "id": 1,
        "title": "json-server",
        "author": "typicode"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    },
    "datas": [
        {
            "name": "typicode",
            "password": "abc123"
        },
        {
            "name": "xgqfrms",
            "password": "xyz123"
        },
        {
            "name": "xyzdata",
            "password": "ufo123"
        }
    ]
}

[xyzdata]

xgqfrms-GitHub/Node-CLI-Tools#15

https://gist.github.com/xyzdata/82337cfa3c0de108ec157b2857f8fee2

https://gist.github.com/xgqfrms-GitHub/384aaa00f84a01537c96708c5ce5b6be

[xyzdata]

Fetch API

fetch(`http://localhost:7777/datas`)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    console.log(`json.length = ${json.length}`);
    json.map(
        (data) => console.log(`data`, data)
    );
    return repos = json;
});

[xyzdata]

Fetch: POST json data

https://stackoverflow.com/questions/29775797/fetch-post-json-data

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://davidwalsh.name/fetch

post demo

https://googlechrome.github.io/samples/fetch-api/fetch-post.html

[xyzdata]

full demo

// import fetch from 'whatwg-fetch';
import 'whatwg-fetch';
// fetch polyfill

const url = `https://abc.xgqfrms.xyz/some-url`;

const headers = new Headers({
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'CustomValue'
});

const datas = JSON.stringify(
    {
        user: "username",
        pwd: "password"
    }
);

const method = `POST`;

const request = new Request(url, {
    headers: headers,
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    body: datas
});

fetch(
    request
).then(
    (response) => response.json()
).catch(
    (err) => {
        console.log(`err`, err);
        // js Throw Error
    }
);






// https://github.com/github/fetch#installation

// Post form
let form = document.querySelector('form');

fetch('/users', {
    method: 'POST',
    body: new FormData(form)
});


// Post JSON
fetch('/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'Hubot',
        login: 'hubot'
    })
});


// File upload
let input = document.querySelector('input[type="file"]');
let data = new FormData();

data.append('file', input.files[0]);
data.append('user', 'hubot');

fetch('/avatars', {
    method: 'POST',
    body: data
});

[xyzdata]

JSON.stringify()

[xyzdata]

https://caniuse.com/#search=fetch

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

[xyzdata]

js Throw Error

Error

new Error([message[, fileName[, lineNumber]]])

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/throw

try {
    throw new Error("Whoops, An Error occurred!");
} catch (e) {
    alert(e.name + ": " + e.message);
}

[xyzdata]

import 'whatwg-fetch';
// fetch polyfill

const url = `https://abc.xgqfrms.xyz/some-url`;

const headers = new Headers({
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'CustomValue'
});

const datas = JSON.stringify(
    {
        user: "username",
        pwd: "password"
    }
);

const method = `POST`;

const request = new Request(url, {
    headers: headers,
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    body: datas
});

fetch(
    request
).then(
    (response) => response.json()
).catch(
    (err) => {
        console.log(`err`, err);
        throw new Error("Whoops, An Error occurred!");
    }
);

[xyzdata]

post data

data, array unique ID

[xyzdata]

PUT

fully update/create

https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT

https://github.com/typicode/json-server#plural-routes

PATCH

partly update

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

[xyzdata]

mlab & free mongodb

gist

https://mlab.com/signup/

[xyzdata]

https://github.com/xyz-data/json-server/tree/master/prod-app