Angular i wysyłanie parametrów (json vs get)

Pracuję nad projektem Laravel (backend) i Angular (frontend) – niestety jeszcze na tym etapie nie tworzę frontu, po prostu nie znam się na Angularze tudzież jakimkolwiek innym framie frontowym, ale niebawem się to zmieni, bo postawiłem sobie za cel zostania fullstackiem.

Ok więc tak, problem był taki, że front wysyłał dane do backendu postem, przy czym dane były „serializowane” w pary: klucz=wartość&… taka płytka serializacja na poziomie angulara nie gwarantuje kodowania wartości, przez co wartości np z + czy & „popsują” nam string, i dane wyjściowe nie będą takie same jak dane wejściowe.

 this.prepareParamsString = function(params) {
 var paramsStringArray = new Array();
 for (property in params) {
 paramsStringArray.push(property + "="+ params[property]);
 }
 return paramsStringArray.join("&");
 }

Rozwiązaniem dla tego problemu jest zamiana tablicy na format JSON, dzięki czemu zachowujemy oryginalość danych i po drugiej stronie możemy spokojnie odkodować dane do postaci tablicy (klucz = wartość)

Łatwo powiedzieć… napisać, ale w praktyce jest z tym więcej zabawy… dla osób, które nie mają doświadczenia i kombinują… :).

Otóż podczas wysyłania danych do Backendu, request był wysyłany z nagłówkiem:

Content-Type: application/x-www-form-urlencoded

Laravel z automatu odczytywał te dane jako jeden długi string i nie można było z tego zrobić tablicy, czyli próba pobrania danych:

$credentials = $request->all();

kończyła się niepowodzeniem… po prostu otrzymywałem pusty string.

Na stackoverflow znalazłem rozwiązanie, że dane wysyłane jsonem można odczytać poprzez:

json_decode(file_get_contents('php://input'), true);

Srsly??? Odczytywać Json takim wynalazkiem? Osobiście nie podoba mi się takie rozwiązanie, dlatego szukałem dalej…

Inne rozwiązaniem to:

$credentials = $request->json()->all();

Już lepiej, ale to oznaczałoby, że musiałbym w całym api zmienić wszystkie metody i być może nawet testy…- a wiadomo – lenistwo to częsta cecha nas programistów :).
Niemniej jednak, chciałem sprawdzić, jak czy testy przejdą – do testowania używam phpunit i teście do wysyłki danych widzę:

$this->json('POST', '/api/v1/auth/sign_in', [
 'email' => 'joe@boo.com',
 'password' => '123456',
 ]
 )->seeJson(['success' => true]);

Dane są wysyłane w formacie JSON, i laravel korzysta ze standardowego $request->all(), więc  wina musi leżeć po stronie Angulara, który coś źle wysyła.. Co się okazało? Phpunit wysyłał requesta wykorzysttując nagłówki:

$headers = array_merge([
 'CONTENT_LENGTH' => mb_strlen($content, '8bit'),
 'CONTENT_TYPE' => 'application/json',
 'Accept' => 'application/json',
 ], $headers);

Angular korzystał z Content-   Type: ” application / x- www-form-urlencoded” zmiana na Content – Type: ” application / json”  zmieniło wszystko. Dane poprawnie się wysyłałmy, ja nie musiałem niczego w kodzie zmieniać i miałem pierwszy pomysł na wpis ;).

Tak więc {„Hello”: „World”} i dzięki za uwagę, mam nadzieję, że wpis komuś pomoże przynajmniej pomógł mnie 😀

Rafath Khan

Tu powinien być pean na moją cześć, jaki to wspaniały jestem i jakimi niezwykłymi problemami się zajmuję, ale prawda jest taka, że jak każdy człowiek - mam swoje wady i może jakieś zalety. Są momenty, kiedy mam odpowiednią ilość zasobów psychoenergetycznych i mogę przenosić góry, a są niestety i takie momenty, kiedy mi się nawet z łóżka wstać nie chce... nie może tak źle nie jest, ale chętnie bym sobie pospał dłużej... Niemniej jednak, gdy uda się pokonać siebie - satysfakcja jest, ale potem przychodzą kolejne rzeczy, z którymi trzeba się zmierzyć... a na nie, niestety, energii może nie starczyć i tu właśnie wkracza tzw samodyscyplina - powinieneś usiąść i zrobić to coś, a nie siedzieć na kanapie i zajadać się słodyczami i oglądać jakiś nieciekawy serial czy film dla spalenia swojej najważniejszej waluty świata... czasu, którego nie da się odzyskać. I właśnie o tej samodyscyplinie traktować będę na tym blogu + kilka innych tematów, które są mi potrzebne do pracy

Może Ci się również spodoba