Vue.use

不管是对象还是函数install 是Vue.use()必须要有的方法 否则无法使用（Vue.use(MintUI)）但axios 不需要Vue.use(axios) 可以直接使用 因为axios没有install

 

Vue.use() 为全局注册一个组件 典型案例Vue.use(Router) this.$router

 

install 方法 也就是说，如果传入的是对象，那就调用插件的install方法并通过apply()方法将install方法改变this的指向为plugin。插件类型为function时，插件运行的上下文this指向null(严格模式下；非严格模式下指向window)将Vue作为参数传入、在vue文件用this调用

 

还可以添加到defineProperties

 

在main.js 注册 Vue.use(Http)

 

哈哈 好吧 分享一个 封装的axios

import Axios from 'axios'
import {Indicator} from 'mint-ui'
import {getStorage} from '../assets/storage/index'

function plugin (Vue) {
  if (plugin.installed) {
    return
  }
  Axios.defaults.baseURL = 'http://'
  Axios.defaults.timeout = 5000 * 2
  // Axios.create({
  //   baseURL: 'http://10.228.10.26:57014/api/',
  //   timeout: 5000 * 2
  //   // withCredentials: true//不通过请求头传递 携带cookie发送
  // })
  // 请求拦截
  Axios.interceptors.request.use(config => {
    // 在发送请求之前做的事情
    Indicator.open() // loading
    let token = getStorage('TokenKey')
    if (config.method === 'post') {
      config.data = JSON.stringify(config.data)
    } else if (config.method === 'get') {
      config.params = {...config.params}
    }
    // 设置请求头
    config.headers['Content-type'] = 'application/json'

    if (getStorage('TokenKey')) {
      config.headers['Authorization'] = 'bearer ' + token
    }
    return config
  }, (err) => {
    return Promise.reject(err)
  })
  // 请求结束
  Axios.interceptors.response.use((res) => {
    Indicator.close()
    if (res.status === 200) {
      return res.data
    }
  }, (err) => {
    Indicator.close()
    if (err.response) {
      if (err.response.status === 401) {
        alert('授权失败')
      }
    }
    return Promise.reject(err)
  })

  Vue.req = (() => {
    return Axios
  }).call(this)

  Object.defineProperties(Vue.prototype, {
    $req: {
      get () {
        return Axios
      }
    }
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(plugin)
}

export default plugin

 

转载于:https://www.cnblogs.com/QQPrincekin/p/11003444.html