axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

axios中文文檔：https://blog.csdn.net/qq_36538012/article/details/81942990
axios-w3cschool-菜鳥教程：http://www.27900.com/axios

Vue 官方建議用 axios 代替 vue-resourse，所以在這里不做vue-resourse的探討；

axios 使用基本方法和個別參數

axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'get',
            responseType: 'json', // 默認的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        })

相關依賴

安裝

1：npm安裝

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

一切環境依賴搭建好之后

下面來寫個例子：axios請求本地json

1：在static文件夾底下新建json文件，（ 本地JSON文件一定要需放在static文件夾之下。）
訪問服務器文件，應該把 json文件放在最外層的static文件夾，這個文件夾是vue-cli內置服務器向外暴露的靜態文件夾

圖片.png

2：test.json數據格式如下：

圖片.png

{
   "name":"wnagxiaoting",
   "age":24
}

3：寫一個axios

getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }

4：整體代碼如下：

<template>
    <div id="app">

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5：前臺顯示：

圖片.png

原文作者：祈澈姑娘
技術博客：http://www.lxweimin.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。