[小程序开发] 请求/响应拦截器

一、请求拦截器

        请求之前调用的函数，用来对请求参数进行新增和修改

二、响应拦截器

        响应之后调用的函数，用来对响应数据进行操作

三、实现代码

// 创建WxResquest类
// 通过类的方式来进行封装，会让代码更具有复用性，也可以方便添加新的属性和方法
class WxResquest{

	// 定义实例属性，用来设置默认请求参数
	defaults={
		baseURL:'',//请求基准地址
		url:'',//接口的请求路径
		data:null,//请求参数
		method:'GET',//默认的请求方法
		//请求头
		header:{
			'Content-type':'application/json'//设置数据的交互格式
		},
		timeout:60000//默认的超时时长，小程序默认的超时时长是1分钟
	}

	// 定义拦截器对象
	// 需要包含请求拦截器以及响应拦截器，方便在请求之前以及响应以后时进行逻辑处理
	interceptors={
		// 请求拦截器
		// request方法，在请求发送之前，对请求参数进行新增或修改
		request:(config) => config,

		// 响应拦截器
		// response方法，在服务器响应数据以后，对响应的数据进行逻辑处理
		reponse:(response) => response
	}

	// 用于创建和初始化类的属性以及方法
	// 在实例化时传入的参数，会被constructor形参进行接收
	constructor(params={}){
		// 通过Object.assign方法合并请求参数
		// 注意：需要传入的参数，覆盖默认的参数，因此传入的参数需要放到最后
		this.defaults = Object.assign({},this.defaults,params)
	}
	// request实例方法接收一个对象类型的参数，属性值和wx.request方法调用时传递的参数保持一致
	request(options){

		// 需要先合并完整的请求地址(baseURL+url)
		options.url = this.defaults.baseURL + options.url
		// 合并请求参数
		options={...this.defaults,...options}

		// 在请求发送之前，调用请求拦截器，新增和修改参数
		options = this.interceptors.request(options)

		// 需要使用Promise封装wx.request，处理异步请求
		return new Promise((resolve,reject)=>{
			wx.request({
			  ...options,
			//   当接口调用成功时会触发success回调函数
			// 接口调用错误，依然会走success
			  success:(res)=>{
				// 不管是成功响应还是失败响应都需要调用响应拦截器
				// 响应拦截器需要接受服务器响应的数据，然后对数据进行逻辑处理，处理好后进行返回，通过resolve将返回的数据抛出去

				// 在给响应拦截器传递参数时，需要将请求参数也一起传递
				// 方便进行代码的调试或者进行其他逻辑处理，需要先合并参数，然后将合并的参数传递给响应拦截器

				const mergeRes = Object.assign({},res,{config:options})
				  resolve(this.interceptors.response(mergeRes))
			  },
			//   当接口调用失败时会触发fail回调函数
			// 当网络超时了，这时网络出现了异常就会执行fail
			  fail:(err)=>{
				  // 不管是成功响应还是失败响应都需要调用响应拦截器
				const mergeErr = Object.assign({},err,{config:options})
				  reject(this.interceptors.response(mergeErr))
			  }
			})
		})
	}
	
	
}

// 以下是实例化代码
// 目前写到一个文件中，是为了方便进行测试，以后会提取成多个文件

// 对WxResquest进行实例化
const instance = new WxResquest({
	baseURL:'https://blog.youkuaiyun.com',
	timeout:15000
})

// 配置请求拦截器
instance.interceptors.request =  (config) => {
	// 在请求发送之前进行的逻辑处理

	return config
}

// 配置响应拦截器
instance.interceptors.reponse = (response) => {
	// 对服务器响应数据进行的逻辑处理

	return response
}

// 将WxResquest实例进行暴露出去，方便再其他文件中进行使用
export default instance