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