请求封装前言

• 通常在小程序项目中，微信已经提供了网络请求API，但是往往这点并不能满足我们，所以有了下面的封装
• Requset请求往往我们有很多需求，此处简单罗列需求并代码实现
  1. 根据不同版本小程序 develop --> trial --> release 版本使用不同域名
  2. request 拦截器，对当前请求发送前做相应处理
  3. 可控式请求 loading 动画，同时支持扩展自定义 loading 文字提示
  4. 根据后端返回请求响应结果做相应处理（列如 210 未登录，220 登录失效等需要与后端共同定义）
• 笔者使用的是 Taro 进行请求封装，解释步骤基本在代码中有描述，笔者没有对每个方法拆分详细讲述
• 笔者是根据之前分享的是Taro模板中的请求封装，拆分讲述思路，可供参考借鉴
• 前言废话太多下面上代码

开始

• 首先在项目 pages 平级创建 service 文件夹,然后分别建立3个文件分别是：
  1. interceptors.ts – 请求响应拦截器。

  import Taro from '@tarojs/taro'
  import { HTTP_STATUS } from './status'
  // 笔者这里引入 mobx 是对 未登录，登陆失效 等做处理
  import cartStroe from '../store/user'
  
  const customInterceptor = (chain:any) => {
  
      const requestParams = chain.requestParams
  
      return chain.proceed(requestParams).then((res:any) => {
          // 清除 loading
          if(requestParams.loading) Taro.hideLoading()
          switch(res.statusCode) {
              case HTTP_STATUS.SUCCESS:
                  const result = res.data
                  if(res.data.code === 200) {
                      // 接口调通且无异常赋予success标识
                      result.success = true
                  } else {
                      // 请求接口错误提示，可通过参数中加入 openErrTips: false 关闭
                      if(requestParams.openErrTips && result.msg) Taro.showToast({ title: result.msg, icon: 'none' })
                      // 登录过期或未登录 需要与后端共同定义
                      if(result.code === 210 || result.code === 220) {
                          // 跳转登陆 清空用户信息等 处理
                          cartStroe.setStatus(false)
                          cartStroe.setUser({})
                          Taro.showToast({ title: (result.code === 210 ? '未登录，请先登陆' : '登录信息失效，请重新登陆' ), icon: 'none' })
                          Taro.navigateTo({ url: '/pages/login/index' })
                          return Promise.reject(result)
                      }
                  }
                  return result
  
              case HTTP_STATUS.CREATED:
                  return Promise.reject('请求成功并且服务器创建了新的资源')
  
              case HTTP_STATUS.ACCEPTED:
                  return Promise.reject('接受请求但没创建资源')
  
              case HTTP_STATUS.CLIENT_ERROR:
                  return Promise.reject('服务器不理解请求的语法')
  
              case HTTP_STATUS.AUTHENTICATE:
                  return Promise.reject('请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应')
  
              case HTTP_STATUS.FORBIDDEN:
                  return Promise.reject('服务器拒绝请求')
  
              case HTTP_STATUS.NOT_FOUND:
                  return Promise.reject('服务器找不到请求的网页')
  
              case HTTP_STATUS.SERVER_ERROR:
                  return Promise.reject('(服务器内部错误) 服务器遇到错误，无法完成请求')
  
              case HTTP_STATUS.BAD_GATEWAY:
                  return Promise.reject('(错误网关) 服务器作为网关或代理，从上游服务器收到无效响应')
  
              case HTTP_STATUS.SERVICE_UNAVAILABLE:
                  return Promise.reject('(服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。')
  
              case HTTP_STATUS.GATEWAY_TIMEOUT:
                  return Promise.reject('(网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求')
  
              default:
                  console.log('请开发者检查请求拦截未匹配到错误,返回statusCode :>> ', res.statusCode)
                  break
              
          }
      })
  }
  
  
  // Taro 提供了两个内置拦截器
  // logInterceptor - 用于打印请求的相关信息
  // timeoutInterceptor - 在请求超时时抛出错误。
  const interceptors = [customInterceptor, Taro.interceptors.logInterceptor]
  
  export default interceptors
  

  2. status.ts – HTTP 通用响应状态码提示（方便开发者寻找请求错误源）。

  export const HTTP_STATUS = {
      // 成功处理了请求，一般情况下都是返回此状态码
      SUCCESS: 200,
      // 请求成功并且服务器创建了新的资源
      CREATED: 201,
      // 接受请求但没创建资源
      ACCEPTED: 202,
      // 服务器不理解请求的语法
      CLIENT_ERROR: 400,
      // 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应
      AUTHENTICATE: 401,
      // 服务器拒绝请求
      FORBIDDEN: 403,
      // 服务器找不到请求的网页
      NOT_FOUND: 404,
      // (服务器内部错误) 服务器遇到错误，无法完成请求
      SERVER_ERROR: 500,
      // (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应
      BAD_GATEWAY: 502,
      // (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。
      SERVICE_UNAVAILABLE: 503,
      // (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求
      GATEWAY_TIMEOUT: 504
  }
  
  /**
  * 此处有替补实现方式
  * 使用键值对直接通过状态码取值
  * const HTTP_STATUS = { 
  *  '200': '请求服务器端成功',
  *  '201': ''
  * }
  * if(HTTP_STATUS[res.statusCode])
  *  console.log(HTTP_STATUS[res.statusCode])
  * else 
  *  console.log(`请开发者检查请求拦截未匹配到错误,返回statusCode :>> ${res.statusCode}`)
  */
  

  3. index.ts – 封装请求导出供调用。

  import Taro from '@tarojs/taro'
  
  import interceptors from './interceptors'
  
  interceptors.forEach(interceptorItem => Taro.addInterceptor(interceptorItem))
  // 模块，命名空间，基础接口声明，此处不作解释 自行了解，结尾提供文档指引
  declare namespace RequestProps {
      interface Method {
          'GET',
          'POST',
          'PUT',
          'DELETE'
      }
      interface Options {
          url: string,
          method: keyof Method, 
          data: any,
          loading?: boolean,
          loadingTitle?: string,
          contentType?: string,
          openErrTips?: boolean
      }
      interface requestParams {
          url: string,
          method: keyof Method,
          data: any,
          header: any,
          loading?: boolean,
          loadingTitle?: string,
          contentType?: string,
          openErrTips?: boolean
      }
  }
  
  /**
  * 获取版本 retrun 对应环境域名
  * develop: '开发版', trial: '体验版', release: '正式版'
  * 支持扩展 - 思路 可通过 process.env.NODE_ENV 判断当前打包是 生产模式或工厂模式 进而判断 适合多环境 dev -> beta -> uat -> pro
  * @returns 域名
  */
  const getVersion = () => {
      // @ts-ignore
      switch (__wxConfig.envVersion)
      {
      case 'develop':
          return 'http://develop.gavinpeng.club'
  
      case 'trial':
          return 'http://trial.gavinpeng.club'
  
      case 'release':
          return 'http://release.gavinpeng.club'
  
      default:
          return 'http://develop.gavinpeng.club'
      }
  }
  
  
  class Request {
      baseOptions(options: RequestProps.Options) {
          let { url, method, data } = options
          // 过滤 扩展属性
          let { loading, loadingTitle, contentType, openErrTips, ...rest } = data
  
          if(loading) Taro.showLoading({ title: loadingTitle || '加载中...', mask: true  })
          const requestParams: RequestProps.requestParams = {
              url: getVersion() + url,
              method,
              data: rest,
              header: {
                  // 支持自定义 contentType
                  'content-type': contentType || 'application/json',
                  // Token
                  'Authorization': Taro.getStorageSync('token')
                  // 此处支持扩展，可通过请求 data 参数中加入 header 对象，在上面过滤 语法糖 ...header 此处就不做过多解释，需要的自行添加了解
                  // ...header
              },
              // 请求是否带 loading， 传递到 请求响应拦截器 清除 loading 
              loading,
              openErrTips
          }
          return Taro.request(requestParams)
      }
      
      get(url:string, data:any) {
          return this.baseOptions({ url, method:'GET', data })
      }
  
      post(url:string, data:any) {
          return this.baseOptions({ url, method:'POST', data })
      }
  }
  
  export default new Request()
  

• 使用方式（笔者对接口模块区分接口管理）
  1. 在项目 pages 平级创建 api 文件夹（统一管理接口）
  2. 在 api 建立 index.ts (导出接口)

  import * as test from './test'
  
  const Api = {
      // 测试模块
      ...test,
      // xxx 模块 
  }
  // 导出所有接口
  export default Api
  

  3. 在 api 建立测试模块接口列表 test.ts

  /*
  * @Author: Gavin
  * @CreateTime: xxxx
  * @Describe: 测试模块相关接口
  */
  // 引入封装后的请求方法
  import request from '@/service/index'
  
  /**
  * 测试
  * @param params 
  * @returns 
  */
  export const isTest = (url:string, data:any) => {
      return request.post(url, data)
  }
  

  3. 在 page 页面引入接口 import Api from '@/api/index' 并使用接口

  Api.isTest({
      id: 1,
      name: 'Gavin',
      // 扩展参数 - 是否需要 loading 非必传默认：false
      loading: true,
      // 扩展参数 - 是否自定义 loadingTitle 非必传默认：加载中...（注：没有开启 loading 此参数无效）
      loadingTitle: '自定义加载提示',
      // 扩展参数 - 是否自定义 contentType 非必传默认：application/json
      contentType: 'x-www-form-urlencoded',
      // 扩展参数 - 是否需要请求错误提示 openErrTips 非必传默认：false
      openErrTips: true,
      // 扩展参数 - 上面讲到的 自定义 header 需要的在封装中添加
      // header: { }
  }).then((res:any) => {
      // 成功
  }).catch((err:any) => {
      // 失败
  })
  

结尾

• 讲述过程中如有不对或错地方还请指出，欢迎各路大佬们指教
• 每一次分享是为了进步，在此过程中，讲述代码思路，亦可以很好的锻炼自身的表达能力
• 成长是生活的动力，加油吧新生代农民工们！
  TypeScript 中文文档指引
  请求封装陈述源码地址