vue項(xiàng)目里面的axios的請(qǐng)求總結(jié)

在vue項(xiàng)目中,一般的請(qǐng)求方式有四種:(最重要的是第四種)

1.對(duì)本地?cái)?shù)據(jù)請(qǐng)求(json)

待續(xù)

2.對(duì)模擬數(shù)據(jù)的請(qǐng)求(mock)

待續(xù)

3.對(duì)第三方數(shù)據(jù)的抓?。╦sonp)

首先明確一點(diǎn),jsonp只是針對(duì)get請(qǐng)求的(/src/common/js/jsonp.js)

思路:原理其實(shí)實(shí)現(xiàn)就是jsonp最原始的請(qǐng)求,但是對(duì)其進(jìn)行一個(gè)比較好的封裝,可以直接拿來(lái)用,通常把這個(gè)方法放在一個(gè)公用的js中

運(yùn)用到代碼中:第一張圖是在頁(yè)面的組件的vue文件中運(yùn)用(/src/components/recommend/recommend.vue),第一張圖是在這個(gè)組件對(duì)于的js中對(duì)方法進(jìn)行傳參(里面的object.assign方法是object自帶一個(gè)方法,自己上網(wǎng)百度學(xué)習(xí),其實(shí)就是將所有的參數(shù)對(duì)象整合成一個(gè)object)——對(duì)應(yīng)我的項(xiàng)目中的/src/api/recommend.js

其實(shí)還有一種做法,不確定是什么請(qǐng)求,但是確實(shí)可以請(qǐng)求到第三方的數(shù)據(jù),不是jsonp的返回格式,上面那種是針對(duì)第三方接口返回的是jsonp的模式,可能下面這種更加通用的東西

1.首先找到build里面的dev-server.js

1.引入axios的插件
添加請(qǐng)求路由

2.在想要的組件的js中添加這個(gè)請(qǐng)求(我個(gè)人理解跟代理很相似)

請(qǐng)求數(shù)據(jù),注意這個(gè)url里面的getDiscList路徑上上圖中配置的

4.對(duì)項(xiàng)目的數(shù)據(jù)的對(duì)接(跨域問(wèn)題)

因?yàn)槲覀冊(cè)陧?xiàng)目中,如果在自己的本地安裝vue的話,怎么去請(qǐng)求后臺(tái)接口的數(shù)據(jù)尼,如果在本地的開(kāi)發(fā)的話,就會(huì)涉及到跨域問(wèn)題

怎么去解決這個(gè)問(wèn)題,我自己也是去網(wǎng)上搜索了很久:

最后找到一種方法就是對(duì)vue項(xiàng)目的跨域的部分進(jìn)行修改:

1.首先找到config里面的index.js文件,然后對(duì)proxyTable進(jìn)行修改,記得注意一點(diǎn),我覺(jué)得這個(gè)api這個(gè)命名是不能修改的,因?yàn)槲腋牧司蛨?bào)錯(cuò)了,不曉得為啥。大家盡量去用api吧?。。?/p>


2.上面配置就可以發(fā)請(qǐng)求了

發(fā)axios的請(qǐng)求,這個(gè)是跨域請(qǐng)求做本地代理的請(qǐng)求方式

這樣的話就可以成功了,真的很簡(jiǎn)單,我卻弄了很久。。。。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容