問題描述

按照axios官網(wǎng)例子發(fā)起請求傳遞json，后臺接受到的數(shù)據(jù)為空，一直卡在options階段。

嘗試的方法

開始以為是接口有問題，使用postman測試下，一切正常，百思不得其解，看了好多issue也解決不了，加了headers:{'content-type':'application/json'}也沒用。

官網(wǎng)上是說，傳json就按application/json進(jìn)行處理，然而并沒有卵用；之后套了一層JSON.stringify(data) ，content-type又變成表單格式了==。

然后翻自己之前的代碼，發(fā)現(xiàn)寫法如出一轍，懷疑是版本號的問題，然而并不是==。。。。考慮到可能和服務(wù)端有關(guān)系。

原代碼如下：

import axios from 'axios';

export default function request(url, params) {

return axios.post(`xxxxxx/${url}`, params)

.then((response) => {

console.log('response', response);

return response;

})

.catch((error) => {

console.log('error', error);

return error;

});

}

最后想想還是用fetch吧(確實用了，發(fā)現(xiàn)還是有這個問題，現(xiàn)在深度懷疑是服務(wù)端將參數(shù)類型卡的太死了，還有polyfill的問題就放棄了，如果有知道的小伙伴請留言告訴我，謝謝)，實在不行就ajax(還要封裝成promise，哭)。出于對axios的堅持，終于找到了解決方法。

解決方法

就是添加qs庫，將json序列化之后傳遞，詳見這個issue。

代碼：

import axios from 'axios';

import qs from 'qs';

export default function request(url, params) {

return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))

.then((response) => {

console.log('response', response);

return response;

})

.catch((error) => {

console.log('error', error);

return error;

});

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

時間： 2018-06-24

總結(jié)

以上是生活随笔為你收集整理的用jsonserve和axios做交互_详解解决使用axios发送json后台接收不到的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。