React实战－javascript访问服务端数据大全

 

React作为新的前端的开发框架，确切的说只是前端页面库。然而在整个前端应用中，数据控制，数据模型、访问服务端则具有很大的灵活性，这也是Reactjs与Angular的主要不同点之一。在数据控制和数据模型方面，主流的是采用Redux，而在服务器访问方面则没有哪个成为主流方式，你可以自己写调用方法，也可以采用第三方JS库，通常有以下几种方法（weixinhao: react-javascript）：

• 通过XMLHttpRequest对象进行访问

XMLHttpRequest对象自身就带有访问服务端端功能,在ie老版本中为ActiveXObject，含有open，send, onreadystatechange等方法，分别负责定义请求，发送请求，获取返回值等功能。如：

var xhttp;

  xhttp=new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      cFunction(this);

    }

 };

  xhttp.open("GET", url, true);

  xhttp.send();

}

• 通过Jquery对象进行访问

Jquery是至今运用最为广泛的js库了，它提供了丰富的服务端访问方法。调用和设置也不复杂，主要通过$.ajax进行方法。如：$.post(...)

  .done(function (data) {    

    //...

  }).fail(function (jqXHR, status, error) {    

    console.log(jqXHR.responseText);    

  });

• Angular访问方式

由于Angular是完整的前端框架，控制和访问也提供了完整的方式，如：

angular.module('cfd', [])

.factory('StudentService', ['$http', function ($http) {

    var path = 'data/people/students.json';

    var students = [];

    /* In the real app, instead of just updating the students array

     * (which will be probably already done from the controller)

     * this method should send the student data to the server */

    var save = function (student) {

        if (student.id === null) {

            students.push(student);

        } else {

            for (var i = 0; i < students.length; i++) {

                if (students[i].id === student.id) {

                    students[i] = student;

                    break;

                }

            }

        }

    };

    /* Populate the students array with students from the server */

    $http.get(path).success(function (data) {

        data.forEach(function (student) {

            students.push(student);

        });

    });

    return {

        students: students,

        save:     save

    };     

}])

• Fetch访问方式

Fetch提供了一个全局的简便的访问http异步请求的方式。如：

ar myHeaders = new Headers();

var myInit = { method: 'GET',

               headers: myHeaders,

               mode: 'cors',

               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

fetch(myRequest)

.then(function(response) {

  return response.blob();

})

.then(function(myBlob) {

  var objectURL = URL.createObjectURL(myBlob);

  myImage.src = objectURL;

});

• SuperAgent访问方式

SuperAgent提供了简单的访问服务端方式，主要针对http，https的Ajax访问，简单精炼的方法满足了普通应用访问服务端端各类常见访问方式，包括数据包头，包体的设置，get、put、post和delete的操作，文本与文件的传递等，学习曲线极低，强烈推荐，官网说明：https://visionmedia.github.io/superagent/#test-documentation。如：

request

   .post('/api/pet')

   .send({ name: 'Manny', species: 'cat' })

   .set('X-API-Key', 'foobar')

   .set('Accept', 'application/json')

   .end(function(err, res){

     if (err || !res.ok) {

       alert('Oh no! error');

     } else {

       alert('yay got ' + JSON.stringify(res.body));

     }

   });

• 其他方式

除了以上介绍的，你还有选择Nodehttp,fetch polypill,node-fetch,isomorphic-fetch,axios,request,reqwest等。每种都有自身的优缺点和使用限制，依据整体开发任务进行合理选择吧，没什么绝对的好坏之分。