vue3-HTTP請求方式
vue3-HTTP請求
jsonp原理 結(jié)合node.js

服務(wù)端:

第15行,相當于在前端返回了js代碼,調(diào)用show()

第19行相當于 20-22行代碼
show被寫死了,最好的方式,客戶端把自己的函數(shù)名傳過去!如下:



傳參方法:


Get Post請求
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ù),就會出問題!!
所以也可以設(shè)置全局

vue3-HTTP請求發(fā)出后,判斷哪里出問題了
在請求后添加
.catch(function (error) {
? ? if (error.response) {
? ? ? // 請求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍
? ? ? console.log("請求成功發(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) {
? ? ? // 請求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)
? ? ? // `error.request` 在瀏覽器中是 XMLHttpRequest 的實例,
? ? ? // 而在node.js中是 http.ClientRequest 的實例
? ? ? console.log("請求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)");
? ? ? console.log(error.request);
? ? } else {
? ? ? // 發(fā)送請求時出了點問題
? ? ? console.log("發(fā)送請求時出了點問題");
? ? ? console.log('Error', error.message);
? ? }
? ? console.log(error.config);
? });然后根據(jù)控制臺,返回的信息判斷。
控制臺:結(jié)果頁面 -> 按F12 -> 點擊控制臺
例如:
? ? service.get('/trace/'+sourceSearchInput.value).then(res => {
? ? ? dialogSearchResult.value.push(res); ? //返回對象,push進去 & vue3中 取變量值-》變量.value
? ? ? //console.log(res);
? ? }).catch(function (error) {
? ? if (error.response) {
? ? ? // 請求成功發(fā)出且服務(wù)器也響應(yīng)了狀態(tài)碼,但狀態(tài)代碼超出了 2xx 的范圍
? ? ? console.log("請求成功發(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) {
? ? ? // 請求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)
? ? ? // `error.request` 在瀏覽器中是 XMLHttpRequest 的實例,
? ? ? // 而在node.js中是 http.ClientRequest 的實例
? ? ? console.log("請求已經(jīng)成功發(fā)起,但沒有收到響應(yīng)");
? ? ? console.log(error.request);
? ? } else {
? ? ? // 發(fā)送請求時出了點問題
? ? ? console.log("發(fā)送請求時出了點問題");
? ? ? console.log('Error', error.message);
? ? }
? ? console.log(error.config);
? });以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli項目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項目中的proxyTable跨域問題小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-01-01
Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01
element的el-tree多選樹(復(fù)選框)父子節(jié)點關(guān)聯(lián)不關(guān)聯(lián)
最近想要實現(xiàn)多選框關(guān)聯(lián)的功能,但是卻出現(xiàn)了element的el-tree多選樹(復(fù)選框)父子節(jié)點關(guān)聯(lián)不關(guān)聯(lián)的問題,本文就來介紹一下解決方法,一起來了解一下2021-05-05
在vue中使用echarts(折線圖的demo,markline用法)
這篇文章主要介紹了在vue中使用echarts(折線圖的demo,markline用法),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

