終于將vue-resource替換成axios了，其中像application/x-www-form-urlencoded發送的頭信息以及返回的response結果這兩點都需要注意一下。

其實https://github.com/mzabriskie/axios也有說明的。因為我在vue-resource中使用了Vue.http.options.emulateJSON = true;，這種請求在發送頭信息時會將Content-Type改為application/x-www-form-urlencoded。

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

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

var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); 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 Vue from 'vue';

import axios from 'axios';

import qs from 'qs';

?

//導入數據加密方法

import secretJS from './secret';

?

//當前運行環境

var domain = 'XXX';

?

//封裝ajax

var ajax = {

//通用的ajax-post

common:function(url,data,sucFn,secret,errFn){

//param說明

//@url ajax訪問的url

//@data post發送的數據

//@sucFn ajax成功時運行函數

//@errFn ajax失敗時運行函數(大部分為缺省，但例如登錄出錯時則需要)

?

//發送ajax

axios.post(domain + url , qs.stringify(secretJS.reData(data,secret)) ).then(

(response) => {

//先判斷appId是否已經過期

if(response.data != 'appId not exist'){

//解密數據

var rs = JSON.parse(secretJS.backSecret(response.data,secret));

//如果

if(rs.success == true) sucFn(rs);

else{

if(errFn === undefined){

//(退出登錄或私鑰+ID丟失)后訪問頁面-提示過期

this.$router.push('/expired');

}else{

errFn(rs);

}

}

}else{

//否則跳轉到溫馨提示登錄過期頁面

this.$router.push('/login');

}

}

)

//ajax完成

}

}

?

export default ajax;

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue2使用axios post跳坑，封装成模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。