axios請求數據

Element UI手冊：cloud.tencent.com/developer/d… 中文文檔：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele…

---

1：進入項目，npm安裝

npm install axios --save
複製代碼

2.在main.js下引用axios

import axios from 'axios'
複製代碼

3:準備json數據 本身寫了一個json數據，放在服務器上，如今要經過vue項目調用數據 www.intmote.com/test.json

4：跨域問題，設置代理，利用proxyTable屬性實現跨域請求 在config/index.js 裏面找到proxyTable ：{} ，而後在裏面加入如下代碼

proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',//設置你調用的接口域名和端口號 別忘了加http
    changeOrigin: true,//容許跨域
    pathRewrite: {
      '^/api': '' //這個是定義要訪問的路徑，名字隨便寫 
    }
  }
},
複製代碼

5:打開一個界面User.vue，開始寫請求數據的方法

methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
複製代碼

User.vue參考代碼：

<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('/api/test.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>



複製代碼

6：再次運行 npm run dev

這個時候，咱們能夠看見，請求的數據

---

原文做者：祈澈姑娘