![](/img/trans.png)
[英]Unable to make a $http.get request to a local JSON file using Angular
[英]Angular 6: unable to make http request
在我的有角度的應用程序中,我試圖向spring restful API發出http post請求。.但是我無法成功..在瀏覽器控制台中沒有收到任何錯誤響應。
我的角度代碼是
addToCart(productId: number, quantity: number) {
const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
console.log("--------order.service.ts----------addToCart()-------productId:"+productId+":------quantity:"+quantity);
this.http.post('http://localhost:8080/order/addtocart',
'{ "dealerId": 9, "createdBy": "-1", "productId": productId, "quantity": quantity}',
{headers: headers})
.pipe(catchError(this.errorHandlerService.handleError));
}
Spring Restful API:
package com.wocs.rest.controller;
import java.io.IOException;
import java.util.Map;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.fasterxml.jackson.core.JsonParseException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.JsonMappingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wocs.services.common.ServiceException;
import com.wocs.services.order.iface.OrderServiceIface;
import com.wocs.services.userrole.model.User;
@RestController()
@RequestMapping("/order")
public class OrderController {
static Logger logger = Logger.getLogger(OrderController.class);
@Autowired
private OrderServiceIface orderService;
public void setOrderService(OrderServiceIface orderService) {
this.orderService = orderService;
}
@RequestMapping(value = "/addtocart", method = RequestMethod.POST, consumes = "text/plain")
public void addToCart(@RequestBody String stringRequestBody) throws JsonParseException, JsonMappingException, IOException, ServiceException
{
logger.info("addtocart:"+stringRequestBody);
Map<String, Object> jsonMap = new ObjectMapper().readValue(stringRequestBody,
new TypeReference<Map<String,Object>>(){});
orderService.addToCart((Integer)jsonMap.get("dealerId"), (String) jsonMap.get("createdBy"), (Integer)jsonMap.get("productId"), (Integer)jsonMap.get("quantity"));
}
}
瀏覽器控制台:
任何幫助將不勝感激..預先感謝..
您沒有訂閱this.http.post(...)
函數,該函數返回一個可觀察的對象。
一個可觀察對象在您訂閱它之前不做任何事情,因此您的代碼應為:
addToCart(productId: number, quantity: number) {
const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
this.http.post('http://localhost:8080/order/addtocart',
'{ "dealerId": 9, "createdBy": "-1", "productId": productId, "quantity": quantity}',
{headers: headers})
.pipe(catchError(this.errorHandlerService.handleError))
.subscribe(data => {
// Handle the updated data here.
console.log(data);
});
}
另外,如果您獲得了可以直接在視圖中使用的任何數據,則可以使用異步管道為您處理預訂。
您錯過了訂閱。 如果您已在服務中聲明addToCart
並希望在組件中處理API響應,則將代碼修改為:
服務
addToCart(productId: number, quantity: number) {
let data = {
"dealerId": 9,
"createdBy": "-1",
"productId": productId,
"quantity": quantity
}
const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
console.log("--------order.service.ts----------addToCart()-------productId:"+productId+":------quantity:"+quantity);
return this.http.post('http://localhost:8080/order/addtocart',
JSON.stringify(data),
{headers: headers})
.pipe(catchError(this.errorHandlerService.handleError));
}
組件 訂閱服務方法
this.service.addToCart(2, 4).subscribe(res => {
console.log(res); // Response from API
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.