1. vue-resource
- vue-resource可以用于通過一些簡(jiǎn)單的方式發(fā)起ajax請(qǐng)求
- 其依賴Vue庫(kù)忌栅，因此在使用的時(shí)候必須要先把Vue導(dǎo)進(jìn)來(lái)，之后才能使用它
- 可以通過npm進(jìn)行安裝使用
- 當(dāng)我們初始化Vue對(duì)象的時(shí)候Vue會(huì)以全局的方式將Vue實(shí)例掛載到window對(duì)象上
- 之后我們使用vue-resource的時(shí)候其會(huì)將一個(gè)
$http對(duì)象掛載到Vue實(shí)例上
- 同樣，這也是全局掛載的方式實(shí)現(xiàn)的疚沐，因此我們可以在Vue實(shí)例的任何地方都可以直接使用
- vue-resource可以發(fā)起get魄宏、post、jsonp
- Vue-resource的API文檔可以在其github主頁(yè)查看
- 手動(dòng)發(fā)起的post請(qǐng)求一般沒有默認(rèn)表單格式
- 因此我們需要自己去設(shè)置post請(qǐng)求的表單格式台盯，也就是application/xxx之類的東西需要我們自己去配置
- 這些內(nèi)容可以在其官網(wǎng)找到相關(guān)的配置選項(xiàng)
發(fā)起get請(qǐng)求
getOk: function () {
_that = this
_that.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=北京').then(response => {
console.log(response)
})
}
<input type="button" value="get請(qǐng)求" @click="getOk">
- 我們需要記住的一個(gè)post請(qǐng)求的配置選項(xiàng)為emulateJSON罢绽，這一配置選項(xiàng)可以將請(qǐng)求體作為application/xxx-form-urlencoded來(lái)發(fā)送
- 我們只要在post的配置選項(xiàng)里面加上{emulateJSON:ture}就可以了
- 在前后端開發(fā)的時(shí)候前端和后端所用的端口往往是不一樣的，因此我們需要去解決跨域訪問的問題静盅，這時(shí)候多半都可以使用jsonp來(lái)解決跨域訪問的問題
- jsonp的實(shí)現(xiàn)原理是動(dòng)態(tài)構(gòu)建script標(biāo)簽來(lái)實(shí)現(xiàn)的良价，因?yàn)樗皇芸缬虻南拗疲虼丝梢越鉀Q我們的跨域訪問問題
- 發(fā)起Ajax請(qǐng)求盡量在create生命周期里面發(fā)蒿叠，因?yàn)楫?dāng)用戶點(diǎn)進(jìn)來(lái)的時(shí)候沒有數(shù)據(jù)將會(huì)很尷尬
2. 全局配置數(shù)據(jù)接口的根域名
- 當(dāng)我們?cè)跇?gòu)建一個(gè)項(xiàng)目的時(shí)候有很多地方需要獲取同一個(gè)服務(wù)器的數(shù)據(jù)明垢，這時(shí)候我們?cè)诿總€(gè)地方都添加服務(wù)器的域名將會(huì)對(duì)后期的項(xiàng)目維護(hù)來(lái)說非常麻煩
- 因此Vue-resource給我們提供了全局配置服務(wù)器根域名的簡(jiǎn)便方式
- 我們可以在vue-resource中設(shè)置根域名: vue.http.options.root='/root' 這樣就可以在發(fā)起請(qǐng)求的時(shí)候只寫請(qǐng)求路徑的文件目錄就可以了
- 我們?cè)谡?qǐng)求體中寫路徑的時(shí)候不需要在前面加上
/等路徑標(biāo)識(shí)符，只需要在后面出現(xiàn)即可
3. 全局配置emulateJSON選項(xiàng)
- 直接可以使用vue.http.options.emulateJSON=ture即可
- 我們也可以將上面的root選項(xiàng)跟emulateJSON選項(xiàng)直接寫進(jìn)vue實(shí)例中的http對(duì)象
