vue2使用axios post跳坑，封裝成模組

2021-08-08 14:42:11 字數 1382 閱讀 8883

而若使用axios的話，就是坑爹的request payload，不是form data引數。

為了達到content-type這種效果作者提供了兩種方法。第一種使用new urlsearchparams()，但是這種方法相容有點不好。

var params = new urlsearchparams();


axios.post('/foo', params);
所以我使用的是第二種方法，使用node_modules資料夾中的qs模組。因為我之前已經將ajax請求稍微封裝了一下（下面說的**基本都是在ajax.js中新增的），所以改動其實真不多。

安裝axios模組就不說了，先將axios和qs引用進來。

import


axios from 


'axios'


;import


qs from 


'qs'


;
然後將傳送的請求引數外面使用qs.stringify進行包裹。

qs


.stringify


(data 


)
最後將接受的結果，提取正確的字段。（在vue-resource中正檔案是response.body，而在axios中正文則是response.data。這個需要注意一下）

console.log(response.data)   //這個列印出來的就是返回的結果
其中response中則有一些請求狀態等等相關的引數，我這邊很少用到，所以就不列出來了。

只需上面三步，就完成了vue-resource到axios的轉換。同時解決了axios傳送x-www-form-urlencoded的需求，特別方便吧~

另外貼上我整個ajax.js檔案，中間用到了加密解密，可以無視一下。

import


vuefrom 


'vue'


;import


axios from 


'axios'


;import


qs from 


'qs'


;//匯入資料加密方法


import


secretjs from 


'./secret'


;//當前執行環境


vardomain 


='***'


;//封裝ajax


varajax 


=else}}


else})


//ajax完成}}


export


default


ajax


;
可以完善的地方還有很多，歡迎拍磚~

使用vue2搭建豆瓣電影

使用vue cli腳手架搭建，按照步驟執行即可 npm install g vue cli vue init webpack doubanmovie cd doubanmovie npm install npm run dev ui庫使用的是element ui,直接引用使用 import elem...

vue2新人入門

預設對webpack，sass，npm有一定的了解。一些vue指令不會說，反正官方文件有，我也懶得抄。一 超級基礎部分 1.全域性安裝 npm install globall vue cli 已全域性安裝了的不必安裝 2.建立乙個基於webpack的模板專案 vue init webpack 你的專...

Vue2學習筆記

v cloak v text v html v bind v on click.stop click.prevent click.capture click.self click.once v model.lazy trim number 或者通過vue的watch監聽來處理watch b func...