vue3-HTTP請(qǐng)求方式
vue3-HTTP請(qǐng)求
jsonp原理 結(jié)合node.js
服務(wù)端:
第15行,相當(dāng)于在前端返回了js代碼,調(diào)用show()
第19行相當(dāng)于 20-22行代碼
show被寫死了,最好的方式,客戶端把自己的函數(shù)名傳過去!如下:
傳參方法:
Get Post請(qǐng)求
1.導(dǎo)入包: vue-resourse
2.調(diào)用get: this.$http.get(‘url參數(shù)’).then((() => { 回調(diào)函數(shù) }
3.調(diào)用post
設(shè)置根域名
emulateJSON:true
如果不帶上面的參數(shù),就會(huì)出問題?。?/p>
所以也可以設(shè)置全局
vue3-HTTP請(qǐng)求發(fā)出后,判斷哪里出問題了
在請(qǐng)求后添加
.catch(function (error) { ? ? if (error.response) { ? ? ? // 請(qǐng)求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍 ? ? ? console.log("請(qǐng)求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍"); ? ? ? console.log(error.response.data); ? ? ? console.log(error.response.status); ? ? ? console.log(error.response.headers); ? ? } else if (error.request) { ? ? ? // 請(qǐng)求已經(jīng)成功發(fā)起,但沒有收到響應(yīng) ? ? ? // `error.request` 在瀏覽器中是 XMLHttpRequest 的實(shí)例, ? ? ? // 而在node.js中是 http.ClientRequest 的實(shí)例 ? ? ? console.log("請(qǐng)求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)"); ? ? ? console.log(error.request); ? ? } else { ? ? ? // 發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題 ? ? ? console.log("發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題"); ? ? ? console.log('Error', error.message); ? ? } ? ? console.log(error.config); ? });
然后根據(jù)控制臺(tái),返回的信息判斷。
控制臺(tái):結(jié)果頁面 -> 按F12 -> 點(diǎn)擊控制臺(tái)
例如:
? ? service.get('/trace/'+sourceSearchInput.value).then(res => { ? ? ? dialogSearchResult.value.push(res); ? //返回對(duì)象,push進(jìn)去 & vue3中 取變量值-》變量.value ? ? ? //console.log(res); ? ? }).catch(function (error) { ? ? if (error.response) { ? ? ? // 請(qǐng)求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍 ? ? ? console.log("請(qǐng)求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍"); ? ? ? console.log(error.response.data); ? ? ? console.log(error.response.status); ? ? ? console.log(error.response.headers); ? ? } else if (error.request) { ? ? ? // 請(qǐng)求已經(jīng)成功發(fā)起,但沒有收到響應(yīng) ? ? ? // `error.request` 在瀏覽器中是 XMLHttpRequest 的實(shí)例, ? ? ? // 而在node.js中是 http.ClientRequest 的實(shí)例 ? ? ? console.log("請(qǐng)求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)"); ? ? ? console.log(error.request); ? ? } else { ? ? ? // 發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題 ? ? ? console.log("發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題"); ? ? ? console.log('Error', error.message); ? ? } ? ? console.log(error.config); ? });
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.0表單校驗(yàn)組件vee-validate的使用詳解
本篇文章主要介紹了Vue2.0表單校驗(yàn)組件vee-validate的使用詳解,詳細(xì)的介紹了vee-validate使用教程。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-01-01Vue創(chuàng)建項(xiàng)目后沒有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項(xiàng)目后沒有webpack.config.js(vue.config.js)文件的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
最近想要實(shí)現(xiàn)多選框關(guān)聯(lián)的功能,但是卻出現(xiàn)了element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的問題,本文就來介紹一下解決方法,一起來了解一下2021-05-05在vue中使用echarts(折線圖的demo,markline用法)
這篇文章主要介紹了在vue中使用echarts(折線圖的demo,markline用法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07