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变量的属性