收藏
评论

对api请求封装的探索和总结

原文连接   https://segmentfault.com/a/1190000017067750
第一份工作的时候我们老大让我封装下请求,我当即就说:封装什么?为什么要封装,本身人家的库就已经进行封装了啊,只需要几个参数就可以调用了,封装的还是要传一些参数的。嗯~当时还是有点理直气壮的,正所谓无知者无谓😂当然最后我还是听老大的了,那时候我只是封装了几个默认参数吧🐶而后经过几年的历练,对api请求的封装也一直在升级,现在请陪着我来一起回顾下

为什么进行封装

  • 简化使用成本。不同于库,封装是针对项目的,我们可以给定请求的主域名、请求头等默认值,减少使用请求时的需要传的参数和其他配置等

  • 可以统一处理一些逻辑,例如对请求异常的提醒处理等

  • 可以对请求进行一些改造以满足使用习惯

怎么封装

回调 VS PROMISE

很明显,回调容易陷入回调地狱,所以无论请求还是其他场景我们目前的编程方式基本都是推荐使用promise的,尤其是新的async/await的引入更是让promise的编程方式更加优雅

总是被resolve

请求总是被resolve?为什么?如果不是,会怎样?

async function f() {  try {    await Promise.reject('出错了');  } catch(e) {    ...  }  ... }

正如上面这段代码,如果我们不加catch的话会怎样?该f函数后面的所有的代码都不会被执行,也就是说如果我们要保证代码的健壮性则必须给async/await函数增try/catch容错 
那我们不用async了呗,确实是个不错的主意,但我必须提醒async的几点好处:

  • 总是返回promise,这一点很有用,例如

if (check) {  return true} else {  return apiPromise() }

你是判断返回值的类型还是resolve true?而async则比较完美的解决了这类问题!

  • async的await能让异步代码看起来是同步的,代码的结构也更清爽,语义也更明确

我更相信你已经在大量使用async,所以,如果使用了async/await那么try/catch千万别忘记哦

即便是简单场景下不需要使用async,promise被拒绝也会有一些小问题,例如

api().then(res=>{  this.hideLoading()  ... }).catch(err=>{  this.hideLoading()  ... })

无论是否被成功resolve,都要执行的一些代码需要在两处书写

所以,你想推介什么?
封装的api请求总是被resolve,这样是不是就没必要关心reject了?也就不用管刚才那一堆问题了,是不是很爽?😊不对啊,总是有异常情况的啊,难道不管了?也resolve啊!😊添加字段区分就行了啊,是不是很聪明?😁

确认请求是完全理想的正确

什么意思?我们先回想下自己是否曾大量写过这样的代码,如果没有请忽略

api().then(res=>{  this.hideLoading()  if (res.code !== 0) {    ...  }  ... })

因为现在很多后端因监控运行状态等原因都不直接返回异常的http状态码,而是以各种code来标示是否处理成功,所以200的请求不一定是真正的请求完成,那校验code就成为必须的了

像真正的api那样

api有点被乱用了,api请求的api是后台提供的业务服务接口,抛去这一种,我们脑中正常的api是什么样子的?是不是像这样array.push(1),是预先定义的函数,是不需要关心内部实现的,所以请把api请求也封装成像真正的api那样,简单好用,随处可用

至此,个人关于对封装api请求的思想基本都阐述了,我们来看看代码实现(基于小程序项目,供参考,核心代码用===============标示)

源码参考

先来看看最终你用的爽不爽

// 例如后台文档是这样的// curl --request POST \//  --url 'http://user-interaction.ylf.org/controller/fun' \//  --header 'Content-Type: application/json' \//  --data '{//    "page":1// }'// 你只需要这样api.controller.fun({page: 10}).then(res=>{  this.hideLoaing()  if (res.errType) {    ... // 异常处理  }  ... // 正常逻辑})// async方式async function() {  const res = await api.controller.fun({page: 10})  this.hideLoaing()  if (res.errType) {    ... // 异常处理  }  ... // 正常逻辑}

目录结构

api ├── doRequest.js // 封装的请求方法├── index.js     // 生成api和export请求方法等├── inject.js    // 拦截器├── renewToken.js // 重新获取token└── serviceJson.js // 供生成API的配置

doRequest.js // 封装的请求方法

import _ from '../lib/tools'import injectMap from './inject'import {api as constApi} from '../constVar'import renewToken from './renewToken'const apiDomain = constApi.domainlet getTokenPromise = ''// 只能同时存在一个实例let wxSessionValid = null // 微信session_key的有效性const checkWxSession = function () {  return new Promise(resolve => {    wx.checkSession({      success() {        resolve(true) // session_key 未过期,并且在本生命周期一直有效      },      fail() {        resolve(false) // session_key 已经失效,需要重新执行登录流程      }    })  }) }// 检查业务层是否也处理成功,参数为请求的返回值const defaultCheckDoRequestSuccess = (res) => !res.data.error_codeexport async function doRequestWithCheckSession(data = {}, opts) {  const opt = Object.assign({needToken: true}, opts)  if (typeof opt.needToken === 'function') { // 是否需要鉴权有一定逻辑性,则可以将needToken配置设置为返回布尔值的函数,无参    opt.needToken = opt.needToken()  }  if (typeof wxSessionValid !== 'boolean') {    wxSessionValid = await checkWxSession() // 检查微信session是否有效  }  let jwt = wx.getStorageSync('jwt')  // 鉴权方式:业务侧的鉴权和对微信session有效性的鉴权  if (opt.needToken && (!jwt || jwt.expire_after <= +new Date() || !wxSessionValid)) { // 需要授权,已过期,去续租    let jwt = ''    if (getTokenPromise) {      jwt = await getTokenPromise    } else {      getTokenPromise = renewToken()      jwt = await getTokenPromise    }    wxSessionValid = true    getTokenPromise = ''    wx.setStorageSync('jwt', jwt)  }  Object.assign(opt, opt.needToken ? {httpOpt: {header: {Authorization: jwt.token}}} : {})  return doRequest(opt.url, data, opt) } ============================================================================================/** * 请求接口函数 * @param url * @param data 请求body * @param opt 具体配置见该函数的参数 * @returns {Promise<any>} * * !!! 总是被解决,永远不会被拒绝,不过你可以通过判断是否有errType值来判断是否请求OK * errType === 'http' 是请求出错 * errType === 'server' 是服务端处理出错,需要checkDoRequestSuccess函数提供判断逻辑 */export function doRequest(url, data, {  method = 'get', httpOpt = {}, needToken = true, needToast = true,  checkDoRequestSuccess = defaultCheckDoRequestSuccess } = {}) {  return new Promise((resolve) => {    wx.request({      url,      data,      method,      ...httpOpt,      success: (res) => { // 请求成功        if (checkDoRequestSuccess(res)) { // 服务端也处理成功          injectMap.forEach((val, key) => { // 匹配拦截规则            if (key.indexOf(url.replace(apiDomain, '')) !== -1) {              val()            }          })          resolve(res)        } else { // 服务端处理失败          needToast && wx.showToast({            title: res.data.reason || '请求出错,请稍后重试',            icon: 'none',            duration: 2000          })          resolve(Object.assign({            errType: 'server'          }, res))        }      },      fail: (err) => { // 请求失败        resolve({          errType: 'http',          err        })        checkNetWorkAndSaveCurrentPath()      }    })  }) } ============================================================================================// 检查网络问题和记录当前页面的路径function checkNetWorkAndSaveCurrentPath() {  /* eslint-disable no-undef */  const pages = getCurrentPages() // 获取当前的页面栈  const page = pages[pages.length - 1] // 当前的页面  // 避免多个请求失败造成多个弱网页面栈,影响回跳  if (['pages/normal/network', 'pages/normal/load'].indexOf(page.route) !== -1) {    return  }  wx.getNetworkType({    success: function (res) {      const pathParamsStrArr = [] // 记录当前页面的路径参数      _.forOwn(page.options, (v, k) => {        pathParamsStrArr.push(`${k}=${v}`)      })      const path = `${page.route}?${pathParamsStrArr.join('&')}`      wx.setStorageSync('badNetPagePath', path) // 记录被弱网中断的页面完整路径      if (res.networkType === 'none') { // 如果是没有网络环境        wx.redirectTo({          url: '/pages/normal/network'        })      } else { // 弱网环境和其他异常情况        wx.redirectTo({          url: '/pages/normal/load'        })      }    }  }) }

核心index.js // 生成api和export请求方法等

import serviceJson from './serviceJson'import { doRequestWithCheckSession, doRequest } from './doRequest'import _ from '../lib/tools'import {api as constApi} from '../constVar'const apiDomain = constApi.domainconst api = {} serviceJson.forEach(obj => {  const keys = obj.url.replace(/\//g, '.')  obj.url = apiDomain + obj.url  _.set(api, keys, function (data) {    return doRequestWithCheckSession(data, obj)  }) })/** * 调用示例 * api.controller.fun({page: 10}) * * 同时暴露出两个封装好的请求方法 */export default {  ...api,  doRequest,  doRequestWithCheckSession }

核心serviceJson.js // 供生成API的配置

/** * 项目请求配置 * * 参数请前往 ./doRequest.js 查看doRequest函数说明,一下参数可能会出现变动而导致不准确 * needToken=true 是否需要token认证 * method=get 请求方法 * dataType=json dataType * check 函数,参数为请求的返回值,要求返回布尔值,true代表请求成功(后台处理成功),false反之 */ export default [  {'url': 'joke/content/list'} ]

inject.js // 拦截器

// 请求hooks,当请求被匹配则执行预设的回调// map的key为 ./serviceJson.js 配置里的url,value为callback// import _ from '../lib/tools'const map = new Map()export default map

虽然是对API的思考,不仅限小程序,但作为同期的思考和总结,来波系列链接😄 
开发微信小程序必须要知道的事  https://segmentfault.com/a/1190000017028505

微信小程序之登录态的探索  https://segmentfault.com/a/1190000017042906

欢迎交流指正,谢谢


最后一次编辑于  2018-11-19
赞 3
收藏