让你的原生小程序不在臃肿

在 vue 开发中我们可以使用 axios 自带的请求和响应拦截器，那么在原生小程序中肿么办呢。看到过很多小伙伴的小程序代码，每一次请求都用一个 wx.request 函数，导致代码臃肿，可读性差。那么有没有什么好的办法解决这一问题呢，答案肯定是有滴。下面是我自己造的请求拦截器分享给大家。

啥也不多说直接上干货

这里只是初版，大家可随意在代码基础上进行扩展。

1）通过 Promise、async 、awit 实现拦截， 目前小程序通过本地设置可直接使用 ES2017 的 async 和 awit，不需要在引入runtime.js  了。

      在本地设置选中增强编译。

2）代码

const request = async (url, params, method) => {
  var cookie = wx.getStorageSync('cookie'),
  contentType = method === 'post' ? 'application/x-www-form-urlencoded' : 'application/json',
  header = { 'content-type': contentType, "Cookie": cookie };
  await resquestInterceptors(url, params, header);
  var result = await requestApi(url, params, method, header);
  var response = await responseInterceptors(result);
  return response
  // 这里把最终处理完的处理 return 出去， 是一个 Promise
}

const requestApi = (url, params, method, header) => {
  return new Promise((resolve, reject) => {
    console.log('<<<<< 请求数据中。。。 >>>>>', url, params, method, header);
    wx.request({            
        url: url,
        data: params,
        header: header,
        method: method, 
        success: res => { resolve(res) },
        fail: err => { reject(err) }
    })
  })
}

const resquestInterceptors = (url, params, header) => {
  //在发起请求之前操作数据
  //params.name = 'xx'
 console.log('<<<<< 请求拦截器 >>>>>', url, params, method, header)}
const responseInterceptors = (response) => {
  // 在数据返回后处理所有可能出现的异常情况
  console.log('<<<<< 响应拦截器 >>>>>', response);
  if (true) {  // 因每个人代码不一样这里就不处理异常了
     return Promise.resolve('success')  
  } else { return Promise.reject('error') }
}

export default request;

为何在 responseInterceptors 中 使用 Promise.resolve 和 Promise.reject呢，是为了把返回值和异常处理完全分离出来。request 函数只会有两种返回要么是需要的数据，要么是异常

3）请求调用

import $request from 'xxx';

$request(url,params,method).then(res => {
    // 这里只处理业务逻辑
}).catch(error => {
    // 这里只捕捉异常，但不处理
})

如果觉得对你有用，动动你发财的小手帮老弟点个赞。