Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub

xgqfrms-GitHub/axios-promise.md Secret

Created June 1, 2017 07:52
Show Gist options
  • Save xgqfrms-GitHub/2e9c64cdd8e8522cb1d3261d2105b3cb to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/2e9c64cdd8e8522cb1d3261d2105b3cb to your computer and use it in GitHub Desktop.
Download ZIP
Axios & Promise & Ajax & Fetch
Raw
axios-promise.md

axios & promise & Ajax & Fetch

$ npm install axios

Promise based HTTP client for the browser and node.js

用于浏览器和node.js的基于Promise的HTTP客户端

https://www.npmjs.com/package/axios

https://github.com/mzabriskie/axios/

react-draggable

https://github.com/mzabriskie/react-draggable

https://mzabriskie.github.io/react-draggable/

https://mzabriskie.github.io/react-draggable/example/

demo

https://github.com/searsaw/react-weather-app

https://scotch.io/courses/getting-started-with-react/setting-up-the-dev-environment?autoplay=true

youtube

Getting Started With Axios (Accessing REST Web Services / HTTP APIs in JavaScript)

https://www.youtube.com/watch?v=1vbpBDWu1AQ

Create A REST API With JSON Server

https://www.youtube.com/watch?v=x3NAo8zqdmo

AJAX to External API - Vue.js 2.0 Fundamentals (Part 10)

https://www.youtube.com/watch?v=KT-yhTnIf_k

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 1, 2017 •
edited

concurrently error

https://github.com/searsaw/react-weather-app

https://scotch.io/courses/getting-started-with-react/setting-up-the-dev-environment?autoplay=true

https://www.npmjs.com/package/concurrently

concurrently 同时

同时运行多个命令。

Like npm run watch-js & npm run watch-sass but better.

https://www.npmjs.com/package/concurrently

https://github.com/kimmobrunfeldt/concurrently

https://github.com/kimmobrunfeldt/dont-copy-paste-this-frontend-template/blob/5cd2bde719654941bdfc0a42c6f1b8e69ae79980/package.json#L9

"start": "concurrently -p \"[{name}]\" -n \"HTTP,JS,LESS\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"npm run http-server\" \"npm run watch-js\" \"npm run watch-styles\"",

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 1, 2017 •
edited

axios-tutorial

https://www.youtube.com/watch?v=1vbpBDWu1AQ

https://github.com/seeschweiler/axios-tutorial

https://axios-sample.firebaseapp.com/

https://github.com/seeschweiler/angular2-http-client-tutorial

https://github.com/seeschweiler/vuejsnewslist

codingthesmartway.

https://github.com/seeschweiler

https://codingthesmartway.com/

@xgqfrms-GitHub
Copy link
Author

css loading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loading...</title>
    <!-- 
    https://scotch.io/courses/getting-started-with-react/setting-up-the-dev-environment?autoplay=true 
     -->
     <!-- https://scotch.io/css/video.css -->
    <style>
        .video-js .vjs-loading-spinner {
            border-color: #e9d07b;
        }
        .vjs-loading-spinner{
            display: block;
        }
        .vjs-loading-spinner {
            /*display: none;*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -25px 0 0 -25px;
            opacity: .85;
            text-align: left;
            border: 6px solid rgba(43,51,63,.7);
            box-sizing: border-box;
            background-clip: padding-box;
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }
        .vjs-loading-spinner:before{
            border-top-color: #fff;
        }
        .vjs-loading-spinner:after, .vjs-loading-spinner:before {
            -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;
            animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;
        }
        .vjs-loading-spinner:after, .vjs-loading-spinner:before {
            content: "";
            position: absolute;
            margin: -6px;
            box-sizing: inherit;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            opacity: 1;
            border: inherit;
            border-color: transparent;
            border-top-color: #fff;
        }
        .vjs-loading-spinner:after {
            border-top-color: #fff;
            -webkit-animation-delay: .44s;
            animation-delay: .44s;
        }
        .vjs-loading-spinner:after, .vjs-loading-spinner:before {
            -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;
            animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;
        }
        .vjs-loading-spinner:after, .vjs-loading-spinner:before {
            content: "";
            position: absolute;
            margin: -6px;
            box-sizing: inherit;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            opacity: 1;
            border: inherit;
            border-color: transparent;
            border-top-color: #fff;
        }
        @keyframes vjs-spinner-spin{to{transform:rotate(1turn)}}
        @-webkit-keyframes vjs-spinner-spin{to{-webkit-transform:rotate(1turn)}}
        @keyframes vjs-spinner-fade{
            0%{border-top-color:#73859f}
            20%{border-top-color:#73859f}
            35%{border-top-color:#fff}
            60%{border-top-color:#73859f}
            to{border-top-color:#73859f}
        }
        @-webkit-keyframes vjs-spinner-fade{
            0%{border-top-color:#73859f}
            20%{border-top-color:#73859f}
            35%{border-top-color:#fff}
            60%{border-top-color:#73859f}
            to{border-top-color:#73859f}
        }
    </style>
</head>
<body>
    <div>
        <div class="vjs-loading-spinner" dir="ltr"></div>
    </div>
</body>
</html>

@xgqfrms-GitHub
Copy link
Author

parsed json

json = response.json();

fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json)
});




fetch(`https://api.github.com/users/xgqfrms/repos`, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
    // json() ???
})
.then(function(json) {
    console.log('parsed json: ', json)
})
.catch(function(error) {
    console.log('parsing failed: ', error)
});

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jun 10, 2017 •
edited 

 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
});



 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0].owner);
    console.log('parsed json: ', json[1].name);
});

@xgqfrms-GitHub
Copy link
Author 

fetch(`https://api.github.com/users/xgqfrms/repos`, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
    // json() ???
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
})
.catch(function(error) {
    console.log('parsing failed: ', error);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment