Axios防抖与节流

前言

在实际项目中，经常需要对API请求进行“防抖”和“节流”处理，实现项目性能优化；

• 防抖（debounce）：防抖意为防止抖动，是为了防止同一事件重复触发，影响性能；防抖重在清零；
  • 应用场景：用户注册、登陆、短信发送、自动保存等；
• 节流（throttle）：节流是指控制事件触发的频率；节流重在设置窗口开关；
  • 应用场景：窗口滚动、实时搜索等；

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，随着Vue的流程，目前已成为很多项目首选的HTTP库；
axios主要有以下功能：

• 从浏览器创建XMLHttpRequests
• 从node.js创建HTTP请求
• 支持Promise API
• 拦截请求与响应
• 取消请求
• 自动转换json数据
• 客户端支持防御XSRF

CancelToken

axios官方提供了两种取消请求的方法。

• 通过CancelToken的工厂方法创建cancel token

  var CancelToken = axios.CancelToken
  var source = CancelToken.source()
  
  axios.get(
  '/v1/getuser',
  {cancelToken:source.token}
  ).catch(
  function(thrown) {
  	if(axios.isCancel(thrown)) {
  		console.log('Request Canceled', thrown.message)
  	}
  	else {
  	console.log(err)
  	}
  }
  )
  
  # 取消请求
  source.cancel('User canceled')
  

• 通过CancelToken的构造函数接收一个executor函数来创建cancel token

  var CancelToken = axios.CancelToken
  var cancel
  
  axios.get(
  '/v1/getuser',
  {cancelToken: new CancelToken(function executor(c))
  	{
  		 // executor函数接收一个cancel函数作为参数
  		 cancel = c
  	}
  }
  )
  
  # 取消请求
  cancel()

方式一全局使用同一个token进行请求的撤掉，当进行遍历撤销时，会撤掉所有请求，例如在进行路由切换时，撤销所有请求会导致切换后请求因使用相同token而无法执行；
方式二为每个请求都使用自己独立token，请求较多将会导致频繁创建对象；
两种方式各有优劣，可根据项目实际情况进行选择；

拦截器

用于在发起或者接收响应时对操作进行处理；

发起请求：添加过程动画等、强制登陆等
接收响应：

axios.interceptors.request.use( 
config=> {
	// 处理请求前操作
	console.log(config)
  // 返回config，继续后续操作
	return config;
	},
err=> {
	console.log(err)
}
)


axios.interceptors.response.use( response=> {
	console.log(response)
	return response
}),

err=> {
	console.log(err)
	return err
}
)