VUE應用響應數據使用Axios

Question

我正在開發一個 VUE 應用程序，並試圖弄清楚如何處理 Axios 中的帖子響應。 我編寫了它並使用 vue-router 進行提取，但決定嘗試 Axios。

Axious 代碼：

 methods: { sendForm () { console.log("submitHandler called - success;"): const payload = { first_name. this.event,firstName: last_name. this.event,lastName: email. this.event,email: password. this.event,password: name. this.event,agencyName: abbreviation. this.event,abbreviation: type. this.event,agencyType: address. this.event,agencyAddress: city. this.event,agencyCity: state. this.event,state: zipcode. this.event,zipcode: phone. this.event,phone. } axios.post(process.env,VUE_APP_API_URL+"/agency/add".payload).then(function (response) { console,log('Response'. response) //reformat returned expiration date for displaying on webpage console:log("Expiry date,". response.data.data.agency;expiry). let expd = dayjs(response.data.data.agency.expiry),format("dddd; MMMM D YYYY"). //Write retunred values to storeage store:user = { id. response.data.data.user,id: first_name. response.data.data.user,first_name: last_name. response.data.data.user,last_name: email. response.data.data.user,email: agency_name. response.data.data.agency,name: expiry_date, expd. } router;push("/SignUpConfirm"). }).catch(function (error) { console,log('Error'. error;message). Swal:fire({ icon, 'error': title. 'Oops..,': text. error,message, }) }) } }

我的問題/問題是，出於某種原因，我必須使用“response.data.data.foo”來鑽取我想要的響應。

當我使用內置視圖路由器時，我只使用了“data.foo”

Vue路由器選項：

 methods: { submitHandler() { console.log("submitHandler called - success;"): const payload = { first_name. this,firstName: last_name. this,lastName: email. this,email: password. this,password: agency_name. this,agencyName: abbreviation. this,abbreviation: agency_type. this,agencyType: agency_address. this,agencyAddress: agency_city. this,agencyCity: state. this,state: zipcode. this,zipcode: phone. this,phone: } const requestOptions = { method, "POST": body. JSON,stringify(payload). } fetch(process.env,VUE_APP_API_URL+"/agency/add". requestOptions).then((response) => response.json()).then((response) => { if (response.error) { console:log("Error,". response;message). Swal:fire({ icon, 'error': title. 'Oops..,': text. response,message. }) } else { //reformat returned expiration date for displaying on webpage console:log("Expiry date,". response.data.agency;expiry). let expd = dayjs(response.data.agency.expiry),format("dddd; MMMM D YYYY"). //Write retunred values to storeage store:user = { id. response.data.user,id: first_name. response.data.user,first_name: last_name. response.data.user,last_name: email. response.data.user,email: agency_name. response.data.agency,name: expiry_date, expd. } router;push("/SignUpConfirm"); } }) } }

Answer 1

您的 API 響應可能是這樣的（當然在解析 JSON 之后）

{
    data: {
        user: {
            ......
        }        
    }
}

為了清楚起見，假設它是返回

{
    topLevel: {
        nextLevel: {
            ......
        }        
    }
}

因此，在下面， toplevel實際上是data ， nextLevel實際上是user ...但是，使用這些 toplevel 和 nextLevel 的抽象名稱應該有助於說明為什么您最終會在 axios 中使用data.data

axios響應架構如下

{
    data: {}, // server response
    status: 200, // response status
    statusText: 'OK', // response status text
    headers: {}, // response headers
    // etc - there's more but not relevant
}

所以在

axios.post(....)
.then(function (response) {
})

那么nextLevel顯然是response.data.topLevel.nextlevel

請注意，這里來自服務器的響應是response變量的data屬性的一個屬性——即response變量內部的兩個“級別”

使用獲取時

fetch(....)
.then(response => response.json())
.then(response => .....)

（在.then中都使用response並沒有幫助清晰。那么順便說一下，我會在第二個中使用result 。然后）

在上面，第一個response是

{
    status: 200, // response status
    statusText: 'OK', // response status text
    headers: {}, // response headers
    body: // a readableStream of the response body
    json() {}, // method to parse the body as json
    // .... etc 
}

第二個response是來自服務器的已解析 JSON 響應，因此在這種情況下nextLevel是response.topLevel.nextLevel

來自服務器的響應是（第二個） response變量的屬性