ajax 统一封装

1.Installation

npm install --save-dev pa-ajax

2.Usage

2-1.在项目中src目录下建立一个配置文件夹如ajaxInject

里面分别建一个index.js(入口文件)、ajaxConfig.js(ajax统一配置)、urlConfig.js(接口配置文件)

具体配置演示：

a.index.js(入口文件)

import api from 'pa-ajax'
import ajaxConfig from './ajaxConfig.js' // ajaxConfig为ajax接口配置
import Vue from 'vue'
Vue.prototype.$http = api(ajaxConfig) // 挂载到vue原型下面

b.ajaxConfig.js(ajax统一配置)

// import encrypt from './encrypt'
import urlConfig from './urlConfig'
let defaultOptions = {
  method: 'POST', // 默认ajax请求方法
  timeout: 5000, // 默认请求超时时间
  isLoading: true, // 是否展示loading（请求转圈加载动画），默认为true
  limitLoadingTime: 3000, // 接口请求在xxms内完成则不展示loading
  isShowDefaultErrTip: true, // 是否展示接口默认错误提示 如果设为false请在请求的catch里面单独设置提示（如果是某个接口不展示，可在请求传参里面添加）
  requestSucKey: 'resultCode', // 接口请求成功返回的key值  默认为resultCode
  requestSucCode: '0', // 接口请求成功的成功码 默认为0
  requestErrDescKey: 'errorDesc', // 接口请求失败错误描述key值  默认为errorDesc
  urlConfig, // url配置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8' // 统一设置默认请求头，单个接口可以额外配置请求头
  }, // 设置请求headers
  interceptorsRequestFn: [(config) => {
    // Do something before request is sent
    console.log('ajax-sender-data', config['data'])
    // isEncryptPostData && !(encryptExcludePaths || []).includes(config['url']) && (config['data'] = encryptPostData(config['data'])) // 报文加密
    return config
  }, (err) => {
    return Promise.reject(err)
  }], // 统一请求拦截
  interceptorsResponseFn: [(response) => {
    return response.data
  }, (err) => {
    return Promise.reject(err)
  }], // 统一响应拦截
  toastConfig: { // 使用ajax提供的默认消息提示及加载动画
    /**
     * 消息展示默认配置
     */
    msgTipDefault: {
      text: '',
      duration: 2500
    },
    /**
     * 加载动画默认配置
    */
    loadingDefault: {
      loading: true,
      text: 'loading...'
    }
  },
  toastConfig: { // 消息提示配置 (使用自定义消息提示和加载动画)
    /**
     * 请求失败/异常的消息提示框
     */
    msgTip: function (tip) {
      let config$toast = (tips) => {
        const options = {
          type: 'text',
          duration: 2000,
          message: tips,
          position: 'bottom'
        }
        return Vue.prototype.$toast(options)
      }
      return config$toast(tip)
    },
    /**
     * 加载展示
     */
    loading: function () {
      return Vue.prototype.$toast.loading({
        mask: true,
        message: '加载中...'
      })
    },
    /**
     * 清除消息展示框、加载动画
     */
    clear: function () {
      return Vue.prototype.$toast.clear()
    }
  }
}

export default defaultOptions

c.urlConfig.js(接口配置文件)

const prefix = '/ts-api1'
const prefix2 = '/ts-api2'
export default {
  mchtInfoList: {
    url: `${prefix}/unionPay/activity/mcht_info_list`,
    method: 'post' // 默认请求方法配置为post的时候可省略此处
  },
  tsRestful: { // restful风格请求
    url: `${prefix2}/getCategories/{cage}`,
    method: 'GET'
  }
}

2-2.在项目入口文件(如main.js)引入

import '@/common/ajax/ajaxInject'

2-3.例子引用

export default {
  created () {
    this.tsAjax()
  },
  methods: {
    async tsAjax () {
      try {
        const sendData = {
          data: {
            a: 123
          },
          headers: {
            'aa': '456'
          }, // 设置请求headers
          isShowDefaultErrTip: false // 是否展示接口默认错误提示 如果设为false请在请求的catch里面单独设置提示
        }
        await this.$http('goodsDetail', sendData)
      } catch (e) {
        console.log('tsAjaxErr', e)
      }
    }
  }
}

其他说明

针对大型项目，urlConfig很大，建议按模块分开写，最后统一合并引入

如： urlConfig下面建三个文件index.js（统一入口，用来统一合并不同模块请求连接）、goods-config.js（商品模块接口）、pay-config.js（支付模块接口）

// goods-config.js

export default {
  goodsDetail: { // 获取商品详情
    url: 'goods/detail/{id}'
  },
  goodsPriceSpc: { // 获取商品规格
    url: 'goods/priceSpc'
  }
}

// pay-config.js

export default {
  payList: { // 获取支付列表
    url: 'pay/payList'
  }
}


/**
 * 获取文件夹下面的请求接口集合
 * modulesContext = require.context('./', true, /-config\.js/)
 */
const getTotalModule = (modulesContext) => {
  let totalModules = modulesContext.keys().reduce((modules, key) => {
    modules[key.replace(/(^\.\/)|(\.js$)/g, '')] = modulesContext(key).default
    return modules
  }, {})
  let obj = {}
  for (let key in totalModules) {
    obj = { ...obj, ...totalModules[key] }
  }
  return obj
}

const prefix = 'ts-api/'
const modulesContext = require.context('./', true, /-config\.js/)
let totalModule = getTotalModule(modulesContext)
// prefix拼接
for (let key in totalModule) {
  totalModule[key].url = `${prefix}${totalModule[key].url}`
}
export default totalModule