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

---

1：進(jìn)入項(xiàng)目，npm安裝

npm install axios --save 復(fù)制代碼

2.在main.js下引用axios

import axios from 'axios' 復(fù)制代碼

3:準(zhǔn)備json數(shù)據(jù) 自己寫了一個(gè)json數(shù)據(jù)，放在服務(wù)器上，現(xiàn)在要通過vue項(xiàng)目調(diào)用數(shù)據(jù) www.intmote.com/test.json

4：跨域問題，設(shè)置代理，利用proxyTable屬性實(shí)現(xiàn)跨域請(qǐng)求 在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼

proxyTable: {'/api': {target: 'http://www.intmote.com',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加httpchangeOrigin: true,//允許跨域pathRewrite: {'^/api': '' //這個(gè)是定義要訪問的路徑，名字隨便寫 }} }, 復(fù)制代碼

5:打開一個(gè)界面User.vue，開始寫請(qǐng)求數(shù)據(jù)的方法

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

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>復(fù)制代碼

6：再次運(yùn)行 npm run dev

這個(gè)時(shí)候，我們可以看見，請(qǐng)求的數(shù)據(jù)

---

原文作者：祈澈姑娘

轉(zhuǎn)載于:https://juejin.im/post/5cebad275188252dda0afd45

總結(jié)

以上是生活随笔為你收集整理的axios请求数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。