前端请求接口那些事

建立请求的方法

  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(){ //请求完成 } });

  1. 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) { // 两个请求现在都执行完成 })); //

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

    推荐阅读