vue axios cdn 封装

1.config.js 常用域名封装：

var cdnUrl = 'https://webimg.fmapp.com'
var cdnUserUrl = 'https://ucgimg.fmapp.com'
var baseurl = 'http://192.168.3.12:8031'

var cdnPic = cdnUrl + '/Public/web/img/webapp'
var cdnUserPic = cdnUserUrl + '/Public/web/img/webapp'

var fmCookieName = 'fmadmtk'
var fmTitle = '-管理中心'

export default {
  fmCookieName,
  fmTitle,
  cdnUrl,
  cdnUserUrl,
  cdnUserPic,
  baseurl,
  cdnPic
}

2.utils.js 常用的方法封装：

import router from '../../Main/router'
import conf from '../config/config'

export default {
  // 封装编程式的导航,以便全局使用
  link (url, data = {}) {
    router.push({path: url, data})
  },
  getPng (str) {
    // 得到正确路径的图片
    return conf.cdnPic + '/' + str + '.png'
  },
  setCookie (name, value, second) {
    var timestr = ''
    if (second > 0) {
      var exp = new Date()
      exp.setTime(exp.getTime() + 1000 * second)
      timestr = ';expires=' + exp.toGMTString()
    }
    document.cookie = name + '=' + escape(value) + timestr
  },
  getCookie (name) {
    var arrt = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'))
    if (arrt) {
      return unescape(arrt[2])
    } else {
      return null
    }
  },
  clearCookie (cname) {
    var cd = new Date()
    cd.setTime(cd.getTime() - 1)
    document.cookie = cname + '=-1;expires=' + cd.toUTCString()
    // window.document.cookie = cname + '=del;path=/;expires=-1'
  }
}

3.api.js axios接口封装：

// 配置API接口地址
import utils from '../utils'
import conf from '../config/config'
import { MessageBox } from 'element-ui'

var root = process.env.NODE_ENV === 'production' ? '/' : '/proxy/'
// 引用axios
var axios = require('axios')

// toLowerCase() 方法用于把字符串转换为小写。
function toType (obj) {
  return {}.toString
    .call(obj)
    .match(/\s([a-zA-Z]+)/)[1]
    .toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
function apiAxios (method, url, params, success) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: '/index.php' + url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    timeout: 30000,
    transformRequest: [function (data) { // 允许在向服务器发送前，修改请求数据
      var str = ''
      for (var key in data) {
        str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
      }
      return str.substr(0, str.length - 1)
    }],
    withCredentials: false// `withCredentials` 表示跨域请求时是否需要使用凭证
  })
    .then(function (res) {
      if (res.data.msg === '请先登录') {
        utils.clearCookie(conf.fmCookieName)
      }
      success(res.data)
    })
    .catch(function (err) {
      let res = err.response
      if (err && res) {
        MessageBox.alert('页面加载错误，请刷新。错误代码: ' + res.status, '提示', {
          confirmButtonText: '刷新页面',
          callback: (action) => {
            // confirm cancel
            if (action === 'confirm') {
              window.location.reload()
            }
          }
        })
      } else {
        console.log(err)
      }
    })
}
// 返回在vue模板中的调用接口
export default {
  get: function (url, params, success) {
    return apiAxios('GET', url, params, success)
  },
  post: function (url, params, success) {
    return apiAxios('POST', url, params, success)
  },
  put: function (url, params, success) {
    return apiAxios('PUT', url, params, success)
  },
  delete: function (url, params, success) {
    return apiAxios('DELETE', url, params, success)
  }
}

4.在main.js中注册，以便全局使用

import Vue from 'vue'
import App from './Main/App'
import router from './Main/router'
import utils from './Public/utils'
import conf from './Public/config/config'
import api from './Public/api/index'
// 将工具方法绑定到全局
Vue.prototype.$utils = utils
Vue.prototype.$conf = conf
// 将API方法绑定到全局
Vue.prototype.$api = api
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

图片.png

5.页面使用

      this.$api.post(
        'url',
        {
       参数
        },
        (res) => {
          if (res.status) {
            响应数据
          } else {
            this.$notify.warning({
              title: '错误',
              message: res.msg
            })
          }
        }
      )

图片.png