Question

如何使用React和Angular发布数据？

React和Angular是否有像$.ajax这样的功能？

我的意思是我需要像React和Angular这样的post函数

$.ajax{
url:"test.php",
type:"POST",
cache:false,
success...
etc.

Answer 1

可以执行异步HTTP（Ajax）请求的工具，可以在 React和Angular?中使用倾向于使用：

Axios公司

＆＃34;基于Promise的HTTP客户端，用于浏览器和node.js＆＃34; [ github page]，[npm page]

用法比较：

＆＃34; ...从Angular的$ http中获取好的部分，然后扔出其他所有内容＆＃34;
~ Six essential javascript libraries - JK Nelson

~~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);
  });

Answer 2

对于React：

您可以使用Javascript中的fetch API来调用该服务。

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)
  })

Answer 3

AngularJS调用$ 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

来自： from jquery $.ajax to angular $http

对于REACT： http://andrewhfarmer.com/react-ajax-best-practices/

Answer 4

查看reqwest，与jQuery api非常相似。

$ .ajax喜欢React js和Angular js的函数？

4 个答案:

Axios公司

用法比较：