vue-resource 請(qǐng)求數(shù)據(jù)

• 安裝 cnpm install vue-resource --save => 安裝 vue-resource 并且寫入依賴關(guān)系到 package.json
• 在 /src/main.js 中引用該插件

// 引用 VueResource
import VueResource from 'vue-resource'
// 使用 
Vue.use(VueResource);

• 在組件中使用 vue-resource 來請(qǐng)求數(shù)據(jù)

# 模板
<button @click="getData()">請(qǐng)求數(shù)據(jù)</button>

# 腳本示例
this.$http.action('/請(qǐng)求api地址', [參數(shù)列表]).then((response) => {
    // 響應(yīng)成功回調(diào)
}, 
(error) => {
    // 響應(yīng)錯(cuò)誤回調(diào)
});

# 具體腳本
// 這里牽扯到了跨域的問題，所以不使用 get 使用 jsonp 請(qǐng)求一個(gè)小白接口
this.$http.jsonp("http://api.okayapi.com/?app_key=2C1C0E2CB68FC1E770C8548EDC559FE9").then(
    (response) => {
        console.log(response); //控制臺(tái)打印請(qǐng)求成功后收到的響應(yīng)結(jié)果
        this.data = response.body.data;
    },
    (error) => {
        console.log(error);
        alert("請(qǐng)求數(shù)據(jù)失敗");
    }
);

一共3步： 下載 => main.js中引用 => 組件 script 中使用 this.$http.action('api地址', [參數(shù)列表]).then(成功回調(diào) , 失敗回調(diào))。

axios

• 安裝 cnpm install axios --save
• 在組件中使用

// 引入axios
import Axios from "axios"

// 使用axios
/*
Axios.get("地址")
// 成功回調(diào)
.then((response) => {
    console.log(response);
})
// 失敗回調(diào)
.catch((error) => {
    console.log(error);
})
*/