old-fetch

基于axios的ajax业务封装

Installation

$ yarn add old-fetch
or
$ npm install old-fetch --save

Demo

//初始化 old-fetch
import Vue from 'vue'
import { createAxios, setAjaxDebugState } from 'old-fetch'

// 是否开启调试
setAjaxDebugState(process.env.NODE_ENV !== 'production')

// 创建配置文件 以下展示最常规的初始化 细节请参考后续文档
// old-fetch将自动完成 Authorization 写入header
const options = {
  handleRequestError: err => {
    //your code...
  },
  handleResponseData: (data) => {
    //your code...
  },
  handleResponseError: (err, config) => {
    //your code...
  },
  // 对请求数据的处理 （可选）
  transformRequest: (data, headers) => {
    data.flag = '1'
    return data
  }
}

export default const fetch = createFetch({
  timeout: 8000, // default 60000
  baseURL: '//webapi.olading.com/api',
}, options)

API

• createFetch 创建一个old-fetch实例

  createFetch(settings, options)

  settings 是axios的相关配置

  options包含5个需自定义的函数：

  • handleRequestData 接收一个requestData参数

  • handleRequestError 接收一个请求失败的err参数

  • handleResponseData

    接收一个响应成功的responseData参数和一个config参数（包含一些api的信息），useRawData为true时，只接收一个原始的返回值

  • handleResponseError

    接收一个响应失败的err参数一个config参数（包含一些api的信息，config可能为空），useRawData为true时，只接收一个原始的返回值

  • paramsSerializerMiddleware and transformRequestMiddleware

    可以是函数 或 函数数组，对请求数据的处理，接收两个参数data和headers；

    注意：get请求时，只接收一个参数data 每个函数需要 return 回处理后的 data

  options还有一些可选参数：

  • AuthorizationKey (String) 默认'Authorization'
  • tokenKey (String) 默认'token'
  • isMock:false,//如果开启mock数据该参数设置为 true
  • ignoreErrorCode (Boolean) 是否忽略处理接口自定义错误码，默认不忽略
  • errorCodeKey (String) 自定义接口错误码字段，默认为'code'
  • errorCodeOkValue (Number|String|Array) 自定义接口错误码表示返回正确的值，默认为0
  • customerHeaders （Object）自定义headers内容 将与defaultHeader混合
  • setHeaderAuth (Boolean) 默认true，是否设置headers Authorization
  • setBodyAuth (Boolean) 默认true，是否设置body Authorization
  • setAuthByLocal (Boolean) 默认false，是否通过localstorage来设置headers Authorization
  • useRawData (Boolean) 是否使用原始的未经过处理的返回值，默认false
  • userDefinedResponse (Boolean) 是否允许用户返回自定义的response，默认false
  • needStartLimit (Boolean) 是否需要启用startLimit分页模式，默认false 不支持get请求
    • 注意 使用此属性 需满足此条件： (data.currPage && data.pageSize)

  以下展示options参数的一些默认值：

  // options默认值
  const defaultOptions = {
    AuthorizationKey: 'Authorization',
    tokenKey: 'token',
    ignoreErrorCode: false, // 是否忽略处理接口自定义错误码
    errorCodeKey: 'errorCode',
    errorCodeOkValue: '0',
    isMock:false,//如果开启mock数据该参数设置为 true
    customerHeaders:null, //自定义headers内容 将与defaultHeader混合
    setHeaderAuth: true, // 是否设置headers Authorization
    setBodyAuth: false, // 是否设置body Authorization
    setAuthByLocal: false, // 是否通过localstorage来设置headers Authorization
    useRawData: false,
    userDefinedResponse: false, // 是否允许用户返回自定义的response
    handleRequestData: noop,
    handleRequestError: noop,
    handleResponseData: noop,
    handleResponseError: noop,
    paramsSerializerMiddleware:null, //对请求数据的处理，接收两个参数`data`和`headers`
    transformRequestMiddleware:null,
    needStartLimit:false //是否需要启用startLimit分页模式 不支持get请求
  }

Other

通过createFetch方法生成的实例的方法说明：

除get方法外，其余方法使用同axios

• get

  .get(url, [params], [config])

  如果想使用跟axios一样的get方法，使用.rawGet替代

使用中的注意事项

• 初始化 old-fetch 并根据需求传入相关hook或配置参数 如没有特殊处理 可以不传
• old-fetch 会处理相对公共、统一的操作 如接口返回未认证 自动跳转到sso的登录页面（默认）
• 调用 login 接口 接收到 token 后 除了放入 store 之外 还需要在 sessionStorage 中存入 token:xxxx 这样一组键值对 old-fetch 会在发送请求时 自动获取并附带此token值
• 当需要处理 stream 形式的下载文件时 只需在调用instance时，传入 responseType: 'blob'，若接口偶发返回非stream而是json，可正常返回json对象

发送普通请求

// 发送普通 GET 请求
axios.get('https://www.url.com/api/xx')

// 发送 json 数据
axios.post('https://www.url.com/api/xx', { nickname: '233' })

// 发送 urlencoded 数据
axios.post('https://www.url.com/api/xx', { nickname: '233' },
  {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
)