參考網址：

[1] https://www.freesion.com/article/7191968296/

[2] http://www.axios-js.com/zh-cn/docs/

[3] https://github.com/axios/axios/blob/master/README.md

 一、安裝

1.1 安裝 axios

npm install axios --save

1.2 安裝 vue-axios

npm install vue-axios --save

二、配置

安裝axios和vue-axios後，在main.js中引入：

import axios from "axios";
import VueAxios 
 
from "vue-axios";

Vue.use(VueAxios,axios)

如果沒有安裝 vue-axios，只安裝axios也可以使用，但main.js中要配置如下：

import axios from "axios";

//下面是將$axios掛在原型上，以便在例項中能用 this.$axios能夠拿到
Vue.prototype.$axios = axios;

三、使用axios請求網路

注意：如果安裝了vue-axios，用  this.axios.get(url).then().catch()  ； 如果沒有安裝 vue-axios、只安裝了axios，用  this.$axios.get

3.1 get請求：

this.axios.get(url).then((res) => {
        console.log("res.data:", res.data);
    }).catch((err) => {
        console.log("err:", err);
    });

也可以寫成API形式：

this.axios({
        method: 'get',
        url: url,
    }).then((res) => {
        console.log(res)
    }).
 
catch((err) => {
        console.log(err)
    });

3.2 post請求：

this.axios.post(url, params).then((res) => {
        console.log(res.data)
    }).catch((err) => {
        console.log(err)
    });

也可以寫成API形式：

this.axios({
        method: 'post',
        url: url,
        data: params
    }).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    });

3.3 執行多個併發請求：

App.vue

<template>
    <div id="app">
        <button @click="loginGet()">axios get request</button>
        <button @click="loginPost()">axios post request</button>
        <button @click="login()">login</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        components: {},
        methods: {
            /**
             * 用 vue-axios 呼叫 axios, get請求
             *         安裝引入後直接用 this.axios.get().then().catch()
             * */
            vueaxiosGet(url) {
                var that = this;
                // 沒有安裝vue-axios時，用 that.$axios
                // return that.axios.get(url).then((res) => {
                //     console.log("res.data:", res.data);
                // }).catch((err) => {
                //     console.log("err:", err);
                // });
                
                return that.axios({
                    method: 'get',
                    url: url,
                }).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                });
            },
            /**
             * 用 vue-axios 呼叫 axios, post請求
             *         安裝引入後直接用 this.axios.post().then().catch()
             * */
            vueaxiosPost(url, params) {
                var that = this;
                // return that.axios.post(url, params).then((res) => {
                //     console.log(res.data)
                // }).catch((err) => {
                //     console.log(err)
                // });
                
                return that.axios({
                    method: 'post',
                    url: url,
                    data: params
                }).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                });
            },
            loginGet() {
                var url = "https://autumnfish.cn/api/joke/list";
                var paramName = "num";
                var paramNum = 3;
                var urll = url + "?" + paramName + "=" + paramNum.toString();
                this.vueaxiosGet(urll);
            },
            loginPost() {
                var myurl = "https://autumnfish.cn/api/user/reg";
                var params = {
                    username: 'jack'
                };
                this.vueaxiosPost(myurl, params);
            },
            login() {
                var that = this;
                // 先寫哪個就先執行哪個
                this.axios.all([that.loginGet(), that.loginPost()])
                    .then(that.axios.spread(function(acct, perms) {
                        // 兩個請求現在都執行完成
                        console.log("兩個請求現在都執行完成");
                    }));
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    button {
        margin: 5px;
    }
</style>

執行結果：