我正在尝试使用Axios和React Native将其发布到我的Mockable API,
我对Axios和Mockable缺乏经验,并且不确定是否能得到我所期望的答复。
说明: 在我的应用程序中,我有一组数据(订单数据),我试图将这些数据发布到我的可模拟api中。
所以我期望的是
每当我发帖时,就将具有以下数据的订单添加到我的API。
正在发生的事情
每次点击后,订单都不会添加到我的API中。
如何使用Axios和React Native将对象添加到Mockable API中?
class BarPaymentScreen extends Component{
static navigationOptions = {
// header: null,
};
constructor(props){
super(props);
this.state ={
isLoading: false,
orderRestaurantId : 'empty',
orderValue: 'empty',
orderProducts: 'empty',
orderTotalPrice: 'empty',
}
}
handleSubmit = () => {
this.setState({
orderRestaurantId : this.props.restaurantId,
orderValue: this.state.value,
orderProducts: this.props.products,
orderTotalPrice: this.props.totalPrice,
})
axios({
method: 'post',
url: 'https://demo3381137.mockable.io/orders',
data: {
orders: {
orderId: '1',
restaurantId: this.state.orderRestaurantId,
orderKey: "AppOrderKey",
userId: "1",
paymentStatus: "approved",
preparing: "approved",
orderStatus: "approved",
paymentMethod: this.state.orderValue,
totalPrice: this.state.orderTotalPrice,
order: [
{
product : "bier",
qty : "5"
}
]
}
}
}).then(function (response) {
console.log('response',response);
})
.catch(function (error) {
console.log("error response",error);
});
console.log('submit');
}
响应数据
response Object {
"config": Object {
"adapter": [Function xhrAdapter],
"data": "{\"orders\":{\"orderId\":\"1\",\"restaurantId\":\"empty\",\"orderKey\":\"AppOrderKey\",\"userId\":\"1\",\"paymentStatus\":\"approved\",\"preparing\":\"approved\",\"orderStatus\":\"approved\",\"paymentMethod\":\"empty\",\"totalPrice\":\"empty\",\"order\":[{\"product\":\"bier\",\"qty\":\"5\"}]}}",
"headers": Object {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8",
},
"maxContentLength": -1,
"method": "post",
"timeout": 0,
"transformRequest": Object {
"0": [Function transformRequest],
},
"transformResponse": Object {
"0": [Function transformResponse],
},
"url": "https://demo3381137.mockable.io/orders",
"validateStatus": [Function validateStatus],
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
},
"data": Object {
"orders": Array [
Object {
"restaurantId": "1",
"order": Array [
Object {
"product": "bier",
"qty": "5",
},
Object {
"product": "wisky",
"qty": "5",
},
Object {
"product": "fanta",
"qty": "5",
},
],
"orderId": "1",
"orderKey": "F3SAR566T",
"orderStatus": "approved",
"paymentMethod": "approved",
"paymentStatus": "approved",
"preparing": "approved",
"totalPrice": 10,
"userId": "1",
},
],
},
"headers": Object {
"access-control-allow-origin": "*",
"cache-control": "public, max-age=0",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"request": XMLHttpRequest {
"DONE": 4,
"HEADERS_RECEIVED": 2,
"LOADING": 3,
"OPENED": 1,
"UNSENT": 0,
"_aborted": false,
"_cachedResponse": undefined,
"_hasError": false,
"_headers": Object {
"accept": "application/json, text/plain, */*",
"content-type": "application/json;charset=utf-8",
},
"_incrementalEvents": false,
"_lowerCaseResponseHeaders": Object {
"access-control-allow-origin": "*",
"cache-control": "public, max-age=0",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"_method": "POST",
"_requestId": null,
"_response": "{
\"orders\": [
{
\"orderId\": \"1\",
\"restaurantId\": \"1\",
\"orderKey\": \"F3SAR566T\",
\"userId\": \"1\",
\"paymentStatus\": \"approved\",
\"preparing\": \"approved\",
\"orderStatus\": \"approved\",
\"paymentMethod\": \"approved\",
\"totalPrice\": 10,
\"order\": [
{
\"product\" : \"bier\",
\"qty\" : \"5\"
},
{
\"product\" : \"wisky\",
\"qty\" : \"5\"
},
{
\"product\" : \"fanta\",
\"qty\" : \"5\"
}
]
}
]
}",
"_responseType": "",
"_sent": true,
"_subscriptions": Array [],
"_timedOut": false,
"_trackingName": "unknown",
"_url": "https://demo3381137.mockable.io/orders",
"readyState": 4,
"responseHeaders": Object {
"Cache-Control": "public, max-age=0",
"access-control-allow-origin": "*",
"content-length": "721",
"content-type": "application/json; charset=UTF-8",
"date": "Mon, 18 Mar 2019 20:45:23 GMT",
"server": "Google Frontend",
"x-cloud-trace-context": "9a52c3976772c84992f870c94d8316a2",
},
"responseURL": "https://demo3381137.mockable.io/orders",
"status": 200,
"timeout": 0,
"upload": XMLHttpRequestEventTarget {
Symbol(listeners): Object {},
},
"withCredentials": true,
Symbol(listeners): Object {
"error": Object {
"kind": 3,
"listener": [Function handleError],
"next": null,
},
"readystatechange": Object {
"kind": 3,
"listener": [Function handleLoad],
"next": null,
},
"timeout": Object {
"kind": 3,
"listener": [Function handleTimeout],
"next": null,
},
},
},
"status": 200,
"statusText": undefined,
}
答案 0 :(得分:0)
代码有效,Mockable.io的页面显示了对我的帖子的回复。