抛弃axios + promise，拥抱 superagent

前言

  最近在定位一个内存问题的时候，有位前辈提醒道，“你现在的接口调用模式用的都是 Promise + Axios 的方式，可以是可是，但是有性能问题，可以试试 Superagent ”。前辈的指点，必须得重视，我也好奇这两个能差多少，看看究竟能提升多少性能。

测试模板

  为了符合开发环境时的调用，我先封装了一下两种模式，细节如下：

  1.封装一个公共方法，用来方便地调用。

import axios from 'axios';
import md5 from 'js-md5';
import superagent from 'superagent'

let errFunc = function () {};

export default calss MyseflRestful {
	/**
	* 请求错误时调用
	*@param {object} response 错误参数
	*/
	static exeCallback(response) {
		if(typeof errFunc !== 'function') {
			return;
		} else {
			errFunc(response)
		}
	}
	/**
	* Promise + axios
	*@param {object} fetchObj 接口参数
	*/
	static fetch(fetchObj) {
		return new Promise(function (resolve, reject) {
			axios({
				...fetchObj,
				timeout: 180*1000,
				headers: {
					Authorization: window.sessionStorage.getItem('AccessToken') || window['token'],
					'Content-Type': 'application/json'
				}
			}).then(function (response) {
				if(response.data.ErrCode === 5004) {
					window._V5Logout();
					reject(response)
				} else {
					resolve(response);
				}
			}).catch(function (response) {
				MyseflRestful.exeCallback(response);
				reject(response);
			});
		});
	}
	/**
	* superagentFetch
	*@param {object} fetchObj 接口参数
	*/
	static superagentFetch(obj) {
		let header = Object.assign({
			'Authorization': window['token'],
			'Content-Type': 'application/json',
			'Cache-Control': 'no-cache, no-store, must-revalidate',
			'If-Modified-Since': 'Mon, 26 Jul 1997 05:00:00 GMT'
		}, obj.header);
		let method = obj.method.toLowerCase();
		//通过这种方式，不需要get post put delete patch 都写一遍
		superagent[method](obj.url)
			.timeout(180*1000)
			.set(header)
			.query(obj.params)
			.send(obj.data).end((err, res) => {
				if(err) {
					Log.error(err);
				}
				if(res && res.body && res.body.ErrCode === 50004) {
					window._V5Logout();
					if(typeof obj.callback === 'function') {
						obj.callback(res);
					}
					return;
				}
				if(typeof obj.callback === 'function') {
					obj.callback(res);
				}
			});
	}
}

  上面的模板有点乱，主要是提供两个静态方法，一个 fetch ，一个 superagent ，方便调接口的时候使用。

Promise + Axios

  在想要调用接口的地方，引入一下刚才的公共方法就行

import MyseflRestful from './MyseflRestful';

let queryParams = {
	url: '/query/data',
	method: 'GET'
};
let time1 = new Date().getTime();
MyseflRestful.fetch(queryParams).then((response) => {
	if(response.data.ReeCode === 0) {
		let time2 = new Data().getTiem();
		console.log('fetch', time2-time1);
	}
}).catch((err) => {
	console.log('err', err);
}) 

  控制台三次调用输出如下

Superagent

  调用方式如下

import MyseflRestful from './MyseflRestful';

let time1 = new Date().getTime();
MyseflRestful.superagent({
	url: '/query/data',
	method: 'GET',
	callback: (res) => {
		if(res.body,ErrCode === 0) {
			let time2 = new Date().getTime();
			console.log('superagent', time2-time1);
		}
	}
})

  输出如下：


  我惊呆了，发现了什么奇妙的东西，竟然节约了这么多时间，我人傻了。以后谁还用 promise ，各位稍等，我这就研究这个 superagent 去，关注我稍后博客，为啥这个东西能这么提升这么多性能。