[英]VUE application Response data useing Axios
I'm developing a VUE application, and I am trying to figure out how to handle post responses in Axios.我正在开发一个 VUE 应用程序,并试图弄清楚如何处理 Axios 中的帖子响应。 I wrote it and used vue-router to make the fetch but decided to try out Axios.我编写了它并使用 vue-router 进行提取,但决定尝试 Axios。
Axious code: 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, }) }) } }
My issue/question is, for some reason, I have to use "response.data.data.foo" to drill to the response I want.我的问题/问题是,出于某种原因,我必须使用“response.data.data.foo”来钻取我想要的响应。
When I used the built-in view router, I just used "data.foo"当我使用内置视图路由器时,我只使用了“data.foo”
Vue-router option: 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"); } }) } }
Your API response is probably something like this (after parsing JSON of course)您的 API 响应可能是这样的(当然在解析 JSON 之后)
{
data: {
user: {
......
}
}
}
For clarity, lets say it is instead returning为了清楚起见,假设它是返回
{
topLevel: {
nextLevel: {
......
}
}
}
so, below, toplevel
would actually be data
, and nextLevel
would actually be user
... but, using these abstract names of toplevel and nextLevel should help illustrate why you end up with data.data
in axios因此,在下面, toplevel
实际上是data
, nextLevel
实际上是user
...但是,使用这些 toplevel 和 nextLevel 的抽象名称应该有助于说明为什么您最终会在 axios 中使用data.data
axios response schema is as follows axios响应架构如下
{
data: {}, // server response
status: 200, // response status
statusText: 'OK', // response status text
headers: {}, // response headers
// etc - there's more but not relevant
}
So in所以在
axios.post(....)
.then(function (response) {
})
then nextLevel
is clearly response.data.topLevel.nextlevel
那么nextLevel
显然是response.data.topLevel.nextlevel
Note that the response from the server here is a property of the data
property of the response
variable - ie two "levels" inside the response
variable请注意,这里来自服务器的响应是response
变量的data
属性的一个属性——即response
变量内部的两个“级别”
When using fetch使用获取时
fetch(....)
.then(response => response.json())
.then(response => .....)
(it doesn't help clarity that you use response
in both .then
by the way, I'd use result
in the second.then) (在.then
中都使用response
并没有帮助清晰。那么顺便说一下,我会在第二个中使用result
。然后)
in the above, the FIRST response
is在上面,第一个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
}
and the second response
is the parsed JSON response from your server, so in this case nextLevel
is response.topLevel.nextLevel
第二个response
是来自服务器的已解析 JSON 响应,因此在这种情况下nextLevel
是response.topLevel.nextLevel
And the response from the server here is a property of (the second) response
variable来自服务器的响应是(第二个) response
变量的属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.