axios response data 返回空字串

來了老弟發表於2022-05-30
iOS字串
最近對做vue3專案時封裝了一下axios作為網路請求工具，遇到了一個問題：傳送post請求時，伺服器返回的response data 為空字串。但是 postman 測試可以正常返回資料（伺服器是以json格式返回的資料）推測是 axios 的配置出了問題。

檢視config

當時是按照axios官網寫的配置：

const config = {
    timeout: options.timeout || 15000,
    headers: options.headers,
    url: '',
    method: 'GET',
    params: {},
    data: {},
    withCredentials: false,
    paramsSerializer: function (params) {
        return qs.stringify(params, {arrayFormat: 'brackets'})
    },
    transformResponse: [function (data) {
        // Do whatever you want to transform the data
        return qs.stringify(data);
    }],
}

基本是從官網抄了一些過來。

return new Promise((resolve, reject) => {
    axios.request({
        ...this.config
    })
        .then(response => {
            console.log('response======', response)
            resolve(response.data)
        })
        .catch(err => {
            console.log(err)
            reject(err.data)
        })
})

列印出的response如下：

config: {url: 'https://www.iic.top/api/login/login', method: 'post', data: '{"req":{"account":"userName123","password":"123456","captcha":"jms7"}}', headers: {…}, params: {…}, …}
data: ""
headers: {content-type: 'application/json; charset=utf-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""

當時以為是headers配置出了問題，特意給headers裡邊加了：

headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
},

但是發現結果卻和之前一樣。

最終發現

是config中的transformResponse 這個方法把返回資料stringify導致data成了空字串。

刪除 transformResponse 方法後，返回結果正常：

config: {url: 'https://www.iicoom.top/api/guest/getGuestToken', method: 'post', headers: {…}, params: {…}, transformRequest: Array(1), …}
data: {code: 40041, message: 'token無效'}
headers: {content-type: 'application/json; charset=utf-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""

總結

配置資訊不能隨便亂用，否則浪費生命。?

相關文章