并发请求和链式请求

我的博客原文

撸起袖子前先知道概念

• 并发请求： 同一时间发送多个请求
• 链式请求： 前一个发送完请求后发送下一个请求

代码实例

并发请求

先看代码吧

function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

function running () {
  ajax(url1)
    .then(......)
    .catch(......)
  ajax(url2)
    .then(......)
    .catch(......)
  ajax(url3)
    .then(......)
    .catch(......)
  ......
}

running()

ajax内含Promise异步操作，所以说会同时发送 url1、url2、url3

链式请求

还是一样，先看代码吧

function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

// 反面教材
function running () {
  ajax(url1)
    .then(() => {
	  ajax(url2)
	    .then(() => {
		  ajax(url3)
		    .then(......)
		})
	})
}

running()

当第一个ajax执行成功后再调用第二个ajax，依次调用(感觉有点像递归)，不过写的时候要注意了，不要想我这样写。 ㄟ( ▔, ▔ )ㄏ

改进写法

• 写法1: 通过ES2017的async/await将异步转同步

function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

function async running () {
  await ajax(url1)
    .then(......)
    .catch(......)
  await ajax(url2)
    .then(......)
    .catch(......)
  await ajax(url3)
    .then(......)
    .catch(......)
  ......
}

running()

• 写法2：在不考虑异常处理时候，在then里面return

function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

function running () {
  ajax(url1)
    .then(() => {
	  ......
	  return ajax(url2)
	})
    .then(() => {
	  ......
	  return ajax(url3)
	})
  ......
}

running()

• 写法三：不推荐，设置callback执行数组进行递归

不推荐原因在于每个请求处理逻辑不一样，这样不能保证每个请求逻辑处理。额外添加处理的参数会使得函数臃肿。

function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

function running ([first, ...args]) {
  if (!first) return
  first
    .then(() => {
      ......
    })
    .catch(() => {
	  ......
	})
	.finally(() => {
	  running(args)
	})
}

running()

优劣(关于请求)

	并发请求	链式请求
优点	1、允许网页加载多个请求，减少数据加载时间 2、单个请求异常不会影响后续操作	1、单一请求会缓解服务器负担
缺点	1、增加服务器负担	1、会增加所有数据加载时间 2、单个请求失败后需要处理才能请求下一个(比如说Async,Await)