$ .ajax as a function for React js and Angular js?

How to send data using React and Angular?

Is there a function $.ajaxfor both React and Angular?

I mean, I need such a post function for React and Angular

$.ajax{
url:"test.php",
type:"POST",
cache:false,
success...
etc.
+4
source share
4 answers

A tool that can perform asynchronous HTTP requests (Ajax)
that will work in both React , and Angular?I usually use:

Wardar

"Promise-based HTTP client for browser and node.js" [github page] , [npm page]


Comparison of use:

"... Angular s $http "
~ javascript - JK

axios XMLHttpRequest

let http = new XMLHttpRequest();
http.open("POST", 'http://readyourlevel.jamesknelson.com/api/grade', true);
http.setRequestHeader('Content-type', 'text/html; charset=UTF-8');
http.onreadystatechange = function() {
    if (http.readyState == 4) {
        if (http.status == 200)
            onGradeResult(JSON.parse(http.responseText));
        else
            onGradeError(http);
    }
};
http.onerror = onGradeError;
http.send(text);

axios

axios({
    url: 'http://readyourlevel.jamesknelson.com/api/grade',
    method: 'post',
    headers: {'Content-type': 'text/html; charset=UTF-8'},
    data: text
}).then(onGradeResult, onGradeError)


Angular :

axios Angular ()

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
  .success(function(data, status, headers, config) {
      $scope.data = data;
  }).error(function(data, status, headers, config) {
      $scope.status = status;
  });

axios ( Angular React)

axios.post('http://example.appspot.com/rest/app', { foo: 'bar' })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
+2

:

API- Javascript .

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {`enter code here`
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })
+1

$http :

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).success(function(data, status, headers, config) {
    $scope.data = data;
}).error(function(data, status, headers, config) {
    $scope.status = status;
});

:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.success(function(data, status, headers, config) {
    $scope.data = data;
}).error(function(data, status, headers, config) {
    $scope.status = status;
});

:

AngularJS ( .post())

AngularJS JS JSON ()

success error ( )

- , AngularJS : http://docs.angularjs.org/api/ng. $http

: jquery $.ajax angular $http

: http://andrewhfarmer.com/react-ajax-best-practices/

+1

reqwest, jQuery api.

0

Source: https://habr.com/ru/post/1660611/


All Articles