前端请求接口那些事

建立请求的方法

1. 原生ajax和jquery的ajax

• 原生ajax：

var xhr = createXHR();
xhr.onreadystatechange =  function(){
    if(xhr.readyState === 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //success
            //console.log(xhr.responseText);
            //成功之后的操作
            gridStore.setData( JSON.parse(xhr.responseText) );
        } else { 
            console.log("Request was unsuccessful: " + xhr.status); 
        }
    }
};
xhr.open('get','diana',true);  //第三个参数 ，是否异步
xhr.send(null); 
function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){ 
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){ 
        if (typeof arguments.callee.activeXString != "string"){ 
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
            for (i=0,len=versions.length; i < len; i++){ 
                try { 
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i]; 
                    break;
                } catch (ex){ 
                //跳过
                } 
            } 
        } 
        return new ActiveXObject(arguments.callee.activeXString); 
    } else {
        throw new Error("No XHR object available.");
    } 
}

• jquery.ajax

$.ajax({
    url:"",    //请求的url地址
    success:function(req){
        //请求成功
    },
    error:function(){
        //请求出错
    },
    complete:function(){
        //请求完成
    }
});

2. axios

	//get请求***************************************************
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
	// post请求***************************************************
 axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
	// 多个并发请求***************************************************
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
//

3. Fetch请求

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });