IwcAxios

基于 axios 进行自定义二次封装，服务于i问财海外团队，统一地使用 axios，功能齐全。

功能列表

• 封装调用方式统一的 GET/POST/PUT/DELETE 方法
• 在 200 请求情况
  • 指定获取状态码函数 getResStatus(resData)，获取 response 中的错误码
  • 指定获取消息函数 getResMsg(resData)，获取 response 中的返回消息
  • validateStatus自主校验接口状态
• 自定义消息提醒
  • showTip是否显示提醒 tipFn(message,isSuc)自定义显示提醒函数
• 自定义错误处理函数，可以根据状态码指定不同错误类型的自定义操作：如 403 跳转到指定页面
  • 自定义接口调用失败时（包括接口失败和校验失败）如何处理错误提示 errorHandlers
• hooks 方法
  • 全局
    • beforeHook(config) 接口请求前自定义操作：如可以在请求时给页面添加蒙层，加载中效果
    • afterHook(responce/error, isError) 接口返回后自定义操作：如取消 loading 效果等
  • 局部
    • beforeLocalHook(config) 当前接口生效，接口请求前自定义操作：如可以在请求时给取消全局hook内容，添加自定义效果等
    • afterLocalHook(responce/error, isError) 当前接口生效，接口返回后自定义操作：如取消 loading 效果等
• 埋点
  • pushTrackData自定义埋点信息上传

基础用法

安装

npm install -S iwc-axios

使用

可以通过以下方法 new 一个 IwcAxios 的实例

// request.js
import IwcAxios from 'IwcAxios'
/** 全局配置 全局生效**/
const iwcConfig = {
  showTip:true,  //是否显示提醒 default true
  tipFn:(message,isSuc)=>{},  //自定义提醒函数 
  errorHandlers : { //自定义错误处理函数 
    400:()=>{},
    'notLogin':()=>{}
  },
  beforeHook: (config) => {},  // 请求前的自定义操作
  afterHook: (responceOrError, isError) => {},  // 请求后的自定义操作
  //从请求响应中获取状态码，默认取status
  getResStatus: (resData) => resData.status, // default
  //从请求响应中获取消息，默认取message
  getResMsg: (resData) => resData.message, // default
  //自定义状态校验，
  validateStatus:(status)=>{},
  //自定义埋点上传
  pushTrackData:(dataArray)=>{},
  trackMax:10, //埋点缓存数
  //埋点过滤urls
  ignoreTrackUrlArray:()=>{return []}, //array or fucntion
}
/** 单次请求使用**/
const iwcOption = {
  //禁用hooks
  disableHooks: {before:true}, //boolean or object {before,after}
  beforeLocalHook: (config) => {},  // 为该次请求添加 请求前的自定义操作 
  afterLocalHook: (responceOrError, isError) => {},  //  为该次请求添加 请求后的自定义操作
  tipConfig:{ //单次提示配置，会覆盖全局配置
    success:false,//成功不提示
    fail:false, //失败不提示
    successTxt:'成功提示',
    failTxt:'失败提示',
  }
  
}

//axiosConfig 为axios配置
const request = new IwcAxios(iwcConfig, axiosConfig)
request.GET(path, params, {iwcOption:iwcOption})

IwcAxios 实例支持 GET/POST/PUT/DELETE实例方法，并且调用方式统一。

• request.GET(path, params, config)
• request.POST(path, params, config)
• request.PUT(path, params, config)
• request.DELETE(path, params, config)

path 为请求路径，params 为请求参数，iwcOption 为 axios 配置，内部新增了 iwcOption 字段用于 IwcAxios 调用实例方法时传入配置，后续会介绍

如果你现有项目已经使用了 axios，需要兼容旧的逻辑，可以通过以下方式获取原始 axios 的引用。 *getOriginAxios()

场景demo

添加全局loading/添加token或者header

IwcAxios 在请求前和请求后都留了钩子，以备需要在这两个时机进行特殊的处理。

• beforeHook(config) 接口请求前的钩子函数

  在接口请求前触发，可以在请求时给页面添加蒙层，加载中效果。config参数是最后发送请求时的配置。

  config 为引用传值，可以对该引用的值进行修改，修改后会影响提交的配置

• afterHook(responce/error, isError) 接口返回后钩子函数

  在接口请求返回后触发，可以进行取消 loading 效果、处理返回的数据结构等操作。其中第一个参数在请求成功时是接口返回的响应response，在接口失败时，是返回的错误对象。第二个参数标识是否是错误返回。

  response 为引用传值，可以对该引用的值进行修改，如对返回的数据结构进行调整

// request.js
import IwcAxios from 'IwcAxios'
const request = new IwcAxios({
  beforeHook: (config) => {
    showLoading();
    config.header.token = 'test-token';
  },
  afterHook:(res,isError)=>{
    if(isError){
      showError(res);
    }else{
      hideLoading();
    }
  }
})

####局部loading/额外配置 IwcAxios 在同样为单次请求预留了钩子，如可以给该次请求添加自定义的加载效果

// request.js
import IwcAxios from 'IwcAxios'
const request = new IwcAxios({},{})
request.GET(path, params, {iwcOption:{
    beforeLocalHook:(config)=>{
      hideLoading(); //取消全局配置的loading
      showLocalLoading();
    },
    afterLocalHook:(res,isError)=> {
      hideLocalLoading();
    }
  }})

####禁用hook 通常我们会在实例化时进行通用的钩子函数定义。但可能存在某些特殊的请求，不需要执行 hooks，这时候我们可以在单独的请求中，指定是否禁用 hooks 以及禁用哪一个 hooks。

// 禁用全部 hooks
request.GET(path, params, { iwcOption: { disableHooks: true } })

// 禁用 before hooks
request.GET(path, params, { iwcOption: { disableHooks: { before: true } } })

// 禁用 afater hooks
request.GET(path, params, { iwcOption: { disableHooks: { after: true } } })

消息提示

####全局消息配置 当接口完成时，我们通常会对信息进行提示。IwcAxios 提供了统一的方式来处理错误消息。在 IwcConfig 中指定 tipFn(message，isSuc) 可以指定错误消息的处理方式，指定 showTip（布尔值）可以开关是否执行信息提示。

如下，我们可以将 tipFn 指定为 alert，则信息会使用 alert 函数弹出提醒。

// request.js
import IwcAxios from 'IwcAxios'
const request = new IwcAxios({
    showTip:true,
    tipFn: (message,isSuc) => alert(message)
})

####为单次请求定制消息提示内容 如成功提示 请求成功，失败不提示

// request.js
import IwcAxios from 'IwcAxios'
const request = new IwcAxios({},{})
request.GET(path, params, {iwcOption:{
    tipFn:{
      success:true,//成功提示
      fail:false, //失败不提示
      successTxt:'请求成功',
    }
  }})

自定义信息及状态码的获取

我们可以通过以下函数分别指定如何从 reponse data 中获取上述的状态码和提示消息。

• getResStatus(resData)，获取 response 中的状态码，默认值 (resData) => resData.status
• getResMsg(resData)，获取 response 中的提示消息，默认值 (resData) => resData.message

import IwcAxios from 'IwcAxios'
const request = new IwcAxios({
  getResStatus: (resData) => {return resData.customStatus}, //可根据resData自定义返回内容
  getResMsg: (resData) => {return resData.customMessage} //可根据resData自定义返回内容
})

validateStatus自主校验接口状态

可以自定义根据getResStatus返回status进行校验

import IwcAxios from 'IwcAxios'
const request = new IwcAxios({
  validateStatus: (status) => { return status ===0 }
})

自定义错误处理函数

使用 axios 进行接口请求发生错误时，一般会有两种，一种接口请求失败，返回404/500等，一种是 validateStatus 不通过时。

在接口请求的过程中，我们有时会需要对于对某些特殊的status进行一些额外的操作，如 403 的时候跳转到无权限的错误提示页。

这时候，我们可以在配置中添加相应的错误处理函数errorHandlers，可以给不同的status指定不同的处理函数，并且支持自定义的 status。

import IwcAxios from 'IwcAxios'
const request = new IwcAxios({
  getResStatus:(resData)=>{
    if(resData.status =='2000') {//假设2000代表未登陆
      return 'noLogin'
    }else{
      return res.status;
    }
  },
  errorHandlers:{
    403:()=>{ gotoNoPermissionPage(); },
    'noLogin':()=>{gotoLoginPage();}
  }
})

异常捕获

IwcAxios同样支持catch获取异常信息

import IwcAxios from 'IwcAxios'
const request = new IwcAxios();
request.GET(path,param,{}).catch(error=>{
  console.log(error.errMsg,error.error)
})