Vue架构关于axios的http.js封装，Vue开发架构必选，统一管理后台请求

简介

     整个项目ajax请求统一封装，每次使用时不用写繁多的代码来请求只需一行代码就可以，使用时采用es8最新语法async 和 await 将异步转换成同步，再也不用嵌套多层请求，一键打包不用开发环境和线上版本切换打包。

http.js封装

核心代码，简单看下复制即可

import Vue from 'vue'
import axios from 'axios'
// 弹框基于vant框架, 可自行引入
import { Toast, Dialog } from 'vant'
Vue.use(Toast).use(Dialog)
// 创建axios的一个实例
var instance = axios.create({
  // baseURL: process.env.NODE_ENV === 'production' ? process.env.API_HOST : null
})
// method 请求方式
// url 请求地址
// data 请求参数
// isToast 是否开启加载状态
// isClearToast 是否消除加载状态
// isDialog 是否弹窗
export default function (method, url, data = null, isToast = false, isClearToast = false, isDialog = true) {
  method = method.toLowerCase()
  if (isToast) {
    Toast.loading({
      duration: 0,
      forbidClick: true, // 禁用背景点击
      loadingType: 'spinner',
      mask: false,
      message: '加载中...'
    })
  }
  if (method === 'post') {
    instance.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_HOST : null
    return instance.post(url, data).then(
      response => {
        if (isClearToast) {
          Toast.clear()
        }
        if (response.data.resultCode != 1 && isDialog) {
          Toast.clear()
          Dialog.alert({
            message: response.data.resultInfoDesc == null ? '接口异常' : response.data.resultInfoDesc
          }).then(() => {
            // on close
          })
        }
        return response.data
      }
    ).catch((error) => {
      Toast.clear()
      Toast('服务器请求失败。')
      return Promise.reject(error)
    })
  } else if (method === 'get_wx') {
    // 方便接入外部接口(微信)
    instance.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_HOST_WX : null
    return instance.get(url, {params: data}).then(
      response => {
        if (isClearToast) {
          Toast.clear()
        }
        if (response.data.resultCode != 200 && isDialog) {
          Toast.clear()
          Dialog.alert({
            message: response.data.resultMsg == null ? '接口异常。' : response.data.resultMsg
          }).then(() => {
            // on close
          })
          Toast(response.data.resultMsg)
        }
        return response.data
      }
    ).catch((error) => {
      Toast.clear()
      Toast('服务器请求失败。')
      return Promise.reject(error)
    })
  } else if (method === 'post_wx') {
    // 方便接入外部接口(微信)
    instance.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_HOST_WX : null
    return instance.post(url, data).then(
      response => {
        if (isClearToast) {
          Toast.clear()
        }
        if (response.data.resultCode != 200 && isDialog) {
          Toast.clear()
          Dialog.alert({
            message: response.data.resultMsg == null ? '接口异常。' : response.data.resultMsg
          }).then(() => {
            // on close
          })
        }
        return response
      }
    ).catch((error) => {
      Toast.clear()
      Toast('服务器请求失败。')
      return Promise.reject(error)
    })
  } else if (method === 'post_ocr') {
    // 方便接入外部接口(OCR)
    instance.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_HOST_OCR : null
    return instance.post(url, data).then(
      response => {
        if (isClearToast) {
          Toast.clear()
        }
        if (response.data.resultCode != '000000' && isDialog) {
          Toast.clear()
          // Toast.fail(response.data.resultInfoDesc)
          if (response.data.data) {
            Toast(response.data.data)
          } else {
            Toast(response.data.resultMsg)
          }
        return response.data
      }
    ).catch((error) => {
      Toast.clear()
      Toast('服务器请求失败。')
      return Promise.reject(error)
    })
  }  else if (method === 'delete') {
    return instance.delete(url, data).then(
      response => {
        if (isClearToast) {
          Toast.clear()
        }
        if (response.data.resultCode != 1 && isDialog) {
          Toast.clear()
          Toast(response.data.resultInfoDesc)
        }
        return response.data
      }
    ).catch((error) => {
      Toast.clear()
      Toast('服务器请求失败。')
      return Promise.reject(error)
    })
  } else {
    console.error('未知的method' + method)
    Toast.clear()
    return false
  }
}

index.js接口统一管理

import ajax from './http.js'
// 定义接口
// 测试用例1
const policy= (params, isToast, isClearToast, isDialog) => ajax('post', '/api/core/Policy', params, isToast, isClearToast, isDialog)
// 测试用例2
const getSaveRequestData = (params, isToast, isClearToast) => ajax('post', '/api/task/getSaveRequestData', params, isToast, isClearToast)
//  =============================================外部接口注意区别
var getSignature
if (process.env.NODE_ENV === 'production') {
  // 获取签名校验
  getSignature = (params, isToast, isClearToast, isDialog) => ajax('get_wx', '/api/wechatShareController/getSignature', params, isToast, isClearToast, isDialog)
} else {
  // 获取签名校验
 getSignature = (params, isToast, isClearToast, isDialog) => ajax('get_wx', '/wechatShareController/getSignature', params, isToast, isClearToast, isDialog)
}
export default {
  policy: policy,
  getSignature: getSignature,
  getSaveRequestData: getSaveRequestData,
}

main.js 里面全局引入方便调用

// 引入api
import apis from './apis/index.js'
// 定义全局属性
Vue.prototype.$ajax = apis // 公共api

实际调用

// 不用嵌套，后台返回错误系统统一提示报错，添加第五个参数可以修改报错提示具体请看http.js API说明
 async mounted(){
 	// 这里async 和 await 联合使用，可将异步操作同步化
    const data= await this.$ajax.policy(params,true,true,false) 
      if (data.resultCode != 1) {
          return false
      }
 }