http://www.cnblogs.com/rogerwu/p/7610478.html
數(shù)據(jù)來源：
http://www.softeem.xin/maoyanApi/ajax/movieOnInfoList
跨域參考下一節(jié) vue電影app
axios簡介
有很多時(shí)候你在構(gòu)建應(yīng)用時(shí)需要訪問一個(gè) API 并展示其數(shù)據(jù)岳悟。做這件事的方法有好幾種佃迄，而使用基于 promise 的 HTTP 客戶端 axios 則是其中非常流行的一種。
promise 簡介：https://segmentfault.com/a/1190000007032448
特點(diǎn)
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端贵少，它本身具有以下特征：
從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
取消請求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防止 CSRF/XSRF
引用
cnpm install axios --save
cnpm install --save vue-axios
項(xiàng)目中引入main.js
//以下4行引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.withCredentials = false//這個(gè)默認(rèn)即為false呵俏，如果改為true，可以傳遞 session信息滔灶，后端要做相應(yīng)修改來放行普碎，
Vue.prototype.$axios = axios; //在vue中使用axios
簡單實(shí)例
<template>
<div>
<button @click="getMovieList">獲取影片列表</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
getMovieList: function() {
//請求https://m.maoyan.com/ajax/movieOnInfoList獲取電影列表
//axios
this.$axios.get("/api/ajax/movieOnInfoList")
.then(response=>{
console.log(response.data);
})
.catch(error=>{
console.log(error);
})
}
}
}
</script>
<style>
</style>
二、請求格式例子
https://blog.csdn.net/h330531987/article/details/79319641
1录平、 發(fā)送一個(gè)GET請求
//通過給定的ID來發(fā)送請求
axios.get('/user?ID=12345')
.then(response=>{
console.log(response);
})
.catch(err=>{
console.log(err);
});
//以上請求也可以通過這種方式來發(fā)送
axios.get('/user',{
params:{
ID:12345,username:wang.qj
}
})
.then(response=>{
console.log(response);
})
.catch(err=>{/
console.log(err);
});
2麻车、 發(fā)送一個(gè)POST請求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(res{
console.log(res);
})
.catch(err=>{
console.log(err);
});
3、 一次性并發(fā)多個(gè)請求(了解)
<template>
<div>
<button @click="getMovieList">獲取影片列表</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {
var axios = this.$axios;
function getCommingList() {
return axios.get(
"/api/ajax/comingList?ci=57&token=&limit=10"
);
}
function getHopeList() {
return axios.get(
"/api/ajax/mostExpected?ci=57&limit=10&offset=0&token="
);
}
//一次性發(fā)兩個(gè)請求
//1斗这、我希望看的2动猬、將上映的
this.$axios.all([getHopeList(), getCommingList()])
.then(axios.spread(function(res1, res2) {
console.log("res1", res1.data)
console.log("res2", res2.data)
}))
},
methods: {
getMovieList: function() {
//請求https://m.maoyan.com/ajax/movieOnInfoList獲取電影列表
//axios
this.$axios.get("/api/ajax/movieOnInfoList")
.then(response=>{
console.log(response.data);
})
.catch(error=>{
console.log(error);
})
}
}
}
</script>
<style>
</style>
實(shí)例1根據(jù)響應(yīng)更新本地?cái)?shù)據(jù)
<template>
<div>
<button @click="getMovieList">獲取影片列表</button>
<!-- step3 頁面上顯示數(shù)據(jù)-->
<ul v-for="movie in mvList">
<li>{{movie.id}}</li>
<li>{{movie.nm}}</li>
<li>{{movie.img}}</li>
<li><img :src="movie.img.replace('w.h','200.300')"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
//第一步，在data里準(zhǔn)備一下空的list表箭，方便后續(xù)請求回來后更新
mvList:[]
}
},
/* created() {
var axios = this.$axios;
function getCommingList() {
return axios.get(
"/api/ajax/comingList?ci=57&token=&limit=10"
);
}
function getHopeList() {
return axios.get(
"/api/ajax/mostExpected?ci=57&limit=10&offset=0&token="
);
}
//一次性發(fā)兩個(gè)請求
//1赁咙、我希望看的2、將上映的
this.$axios.all([getHopeList(), getCommingList()])
.then(axios.spread(function(res1, res2) {
console.log("res1", res1.data)
console.log("res2", res2.data)
}))
}, */
methods: {
getMovieList: function() {
//請求https://m.maoyan.com/ajax/movieOnInfoList獲取電影列表
//axios
this.$axios.get("/api/ajax/movieOnInfoList")
.then(response=>{
console.log(response.data.movieList);
//step2 響應(yīng)回來后免钻，用響應(yīng)的list更新我自己的list
this.mvList=response.data.movieList;
})
.catch(error=>{
console.log(error);
})
}
}
}
</script>
<style>
</style>
