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);
})
*/
