Vue 請求傳公共參數(shù)的操作
我就廢話不多說了,大家還是直接看代碼吧~
// An highlighted block //http request攔截器 axios.interceptors.request.use( config =>{ const token = window.sessionStorage.getItem('Tk_token') const user_id=window.sessionStorage.getItem('Tk_user_id') // config.data = JSON.stringify(config.data); // config.headers = { // 'Content-Type':'application/x-www-form-urlencoded' // } if(token){ config.params = {'token':token,'user_id':user_id} } console.log(config); return config; }, err =>{ return Promise.reject(err); } )
補(bǔ)充知識:Vue聯(lián)合axios發(fā)送后臺post請求時的參數(shù)問題
開始用的是vue-resource,后來發(fā)現(xiàn)這個已經(jīng)很久沒有更新了,作者已經(jīng)停止更新了,而且就連作者也推薦用axios,那么我就用axios吧,改成axios之后,就出現(xiàn)了一個問題:參數(shù)問題。
怎么個參數(shù)問題呢?用vue-response來發(fā)送post請求的時候,傳入的參數(shù)到后臺是一個一個分開的,比如傳了參數(shù)
{ username:'name1', password:'pwd1' }
就是很簡單的用戶名和密碼,vue-resource傳到后臺之后,后臺的接口方法參數(shù)是兩個,一個是username,一個是password,都可以分別取到;但是axios不同,axios到后臺之后,是一個map結(jié)構(gòu)的對象,需要用@RequestBody Map map這種方式來獲取,然后從map中一個一個取出來,這樣也可以。但是有沒有辦法讓axios傳給后臺的參數(shù)也是一個一個的呢?當(dāng)然有。
第一個方法就是URLSearchParams,用這個添加好參數(shù),到后臺就是一個一個的,但是這個IE不支持。
還有一個辦法,就是qs,qs的話有兩種引入方式,一種就是用npm安裝好后,直接import,然后就可以用了;另一種就是在頁面直接引入qs.js,就是<script src='js/qs.js'></script>這種方式,然后
注意了!
這里要注意了!
如果是import方式引入的,我們就用qs.stringify調(diào)用就好了,但是?。。?/p>
注意了!
如果是js文件引入的方式,用的Qs,不是qs,Q是大寫的Q,也就是Qs.stringify。
然后就可以了!
以上這篇Vue 請求傳公共參數(shù)的操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)數(shù)字動態(tài)翻牌的效果(開箱即用)
這篇文章主要介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌的效果(開箱即用),實現(xiàn)原理是激將1到9的數(shù)字豎直排版,通過translate移動位置顯示不同數(shù)字,本文通過實例代碼講解,需要的朋友可以參考下2019-12-12Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決
本文主要介紹了Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04基于Vue實現(xiàn)文件上傳的幾種實現(xiàn)方式
文件上傳是web開發(fā)中一個常見的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來實現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實現(xiàn)文件上傳的幾種實現(xiàn)方式,需要的朋友可以參考下2024-03-03vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03