axios
什么是axios？
Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。
Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
Github開源地址： https://github.com/axios/axios
Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax
安裝方法
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
在vue項目根下使用 npm:
$ cnpm install --save axios
使用
我們先准備一個test.json文件
跑看看以下代碼
axios.get("test.json").then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
發現傳回來的數據在.data.data里面
還包括熟悉的200狀態碼之類的
小做更改，就能通過axios進行ajax請求了
一個簡單的demo
<body>
<div id="vm">
<ul>
<button @click="handleclick">獲取數據</button>
<li v-for="data in datalist" >
<p>{{data.name}}</p>
<img :src="data.poster" alt=""/>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data: {
datalist: []
},
methods: {
handleclick: function () {
axios.get("test.json").then(res=>{
console.log(res.data.data.films);
this.datalist = res.data.data.films
}).catch(err=>{
console.log(err);
})
}
}
})
</script>
</body>
點擊獲取數據按鈕后會進行ajax請求，網頁變為如下：
反向代理
官方文檔：https://cli.vuejs.org/zh/config/
vue.config.js是一個可選的配置文件，如果項目的 (和package.json同級的) 根目錄中存在這個文件，那么它會被@vue/cli-service自動加載。你也可以使用package.json中的vue字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
獲取跨域ajax
從貓眼電影上找到一個ajax請求
http://m.maoyan.com/ajax/moreComingList?ci=209&token=&limit=10&movieIds=1208919%2C1301774%2C1241385%2C1233290%2C1197077%2C1222268%2C1218142%2C1218188%2C1250661%2C1277751&optimus_uuid=9E2131905C8611EA918CEB3F73C50396C646A00022474FE6B0E7E55F3CF3B523&optimus_risk_level=71&optimus_code=10
把（一）中的demo做成組件
<template>
<div>
<ul>
<button @click="handleclick">獲取數據</button>
<li v-for="data in datalist" :key="data.name">
<p>{{data.name}}</p>
<img :src="data.poster" alt=""/>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
handleclick () {
axios.get('http://m.maoyan.com/ajax/moreComingList?ci=209&token=&limit=10&movieIds=1208919%2C1301774%2C1241385%2C1233290%2C1197077%2C1222268%2C1218142%2C1218188%2C1250661%2C1277751&optimus_uuid=9E2131905C8611EA918CEB3F73C50396C646A00022474FE6B0E7E55F3CF3B523&optimus_risk_level=71&optimus_code=10').then(res => {
console.log(res)
})
console.log('click')
}
},
data () {
return {
datalist: []
}
}
}
</script>
跑一下，發現報錯：跨域請求
添加vue.config.js
根據官方文檔https://cli.vuejs.org/zh/config/#devserver
直接把模板拿來改
module.exports = {
devServer: {
proxy: {
'/ajax': {
target: 'http://m.maoyan.com',
changeOrigin: true
}
}
}
}
記住要放在根目錄中
然后把axios中的頭部去掉！
改為
axios.get('ajax/moreComingList?ci=209&token=&limit=10&movieIds=1208919%2C1301774%2C1241385%2C1233290%2C1197077%2C1222268%2C1218142%2C1218188%2C1250661%2C1277751&optimus_uuid=9E2131905C8611EA918CEB3F73C50396C646A00022474FE6B0E7E55F3CF3B523&optimus_risk_level=71&optimus_code=10').then(res => {
console.log(res)
})
還是不行？
再跑一下，發現依舊報錯了，怎么辦？
原來是因為修改完config需要重啟項目
重啟項目
重新yarn serve一下，點擊發現東西拿到了。
然后就是和（一）一樣的內容了，該怎么處理怎么處理
