vue-cli 中的数据请求

数据请求的方式

axios

1.安装:

npm install axios vue-axios -S;

2.作为插件

import Vue from 'vue';
import Axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios,Axios);    //注意顺序

3.使用：

this.axios.get("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    this.ajaxdata = `姓名：${res.data.name} - 年龄：${res.data.age}`;
}).catch((err)=>{
    console.log(err)
});

vue-source

1.安装：

npm install vue-router vue -S

2.作为插件

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

3.使用

//通过vue-resource方式获取数据
this.$http.get("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    this.ajaxdata2 = `姓名：${res.data.name} - 年龄：${res.data.age}`;
}).catch((err)=>{
    console.log(err)
});

fetch

1.安装：
无需安装

2.作为插件
无需给vue添加插件

3.使用：

fetch("http://localhost/2019/vue_test1/mydata/1.json")
.then((res)=>{
    //转化格式
    res.json()
    .then((res2)=>{
        this.ajaxdata3 = `姓名：${res2.name} - 年龄：${res2.age}`;    
    })
    .catch((err)=>{
        console.log(err);
    })
})
.catch((err)=>{
    console.log(err);
})