index.js------axios封裝

import { Notify } from 'vant';  //使用vant框架 
import axios from 'axios'
import store from '../store'  //loading
const qs = require('qs')  

const service = axios.create({ 
  baseURL: 'http://xxx', 
  timeout: 10000
})

const pending = []
const cancelToken = axios.CancelToken

//處理重復(fù)請(qǐng)求
const addPending = ({ config }) => {
  const url =
    config.url + '&' + config.method + '&' + config.data
  config.cancelToken = new cancelToken(cancel => {
    if (!pending.some(item => item.url === url)) {
      pending.push({
        url,
        cancel
      })
    }
  })
}
const removePending = ({ config }) => {
  const url =
    config.url + '&' + config.method + '&' + config.data
  pending.forEach((item, index) => {
    if (item.url === url) {
      item.cancel('取消重復(fù)請(qǐng)求:' + config.url)
      pending.splice(index, 1)
    }
  })
}

//請(qǐng)求頭預(yù)處理
const requestHeaders = ({ config }) => {
 // 1.如果需要加時(shí)間戳  
  // const timestamp = new Date().getTime()
  // config.headers.timestamp = timestamp
  // 2.如果請(qǐng)求頭需要加token
  // const token = localStorage.getItem('token')
  // if (token) {
  //   config.headers.token = token
  // }
}

//請(qǐng)求參數(shù)預(yù)處理
const requestParams = ({ config } = {}) => {
//登陸時(shí)數(shù)據(jù)存到localStorage
//如果參數(shù)需要用到token則賦值
  const isLogin = JSON.parse( localStorage.getItem('userInfo') )
  const param = qs.parse(config.data)
  if(param.token !== undefined){
    param.token = isLogin && isLogin.token
    param.uid = isLogin && isLogin.uid
  }
  if ( config.method === 'post') {
    config.data = qs.stringify(param)
  }
}

//請(qǐng)求開(kāi)始&&loading=true
const requestStart = ({ config } = {}) => {
  requestHeaders({ config })
  requestParams({ config })
  removePending({ config })
  addPending({ config })
  store.commit('setLoading', true)
}

//請(qǐng)求攔截器
service.interceptors.request.use(
  config => {
    requestStart({ config })
    return config
  },
  error => {
    Notify('請(qǐng)求出錯(cuò)')
    Promise.reject(error)
  }
)


//請(qǐng)求結(jié)束&&loading=false
const requestEnd = ({ config } = {}) => {
  removePending({ config })
  store.commit('setLoading', false)
}

//請(qǐng)求結(jié)果處理
const responseResolve = ({ status, data, config } = {}) => {
  if (status === 200) {
    switch (data.status) {
      case 'ok':
        return Promise.resolve(data.data)
      case 'relogin':
        localStorage.removeItem('userInfo')
        Notify('登錄超時(shí)擎场，請(qǐng)重新登錄！')
        window.location.href = '#/'
        return Promise.reject(data)
      default:
        Notify(data.errormsg)
        return Promise.reject(data)
    }
  } else {
    Notify(data || '操作失敿该А迅办！')
    store.commit('setLoading', false)
    return Promise.reject(data.data)
  }
}

//響應(yīng)攔截器
service.interceptors.response.use(
  response => {
    const { status, data, config } = response
    requestEnd({ config, data })
    return responseResolve({ status, data, config })
  },
  error => {
    if (axios.isCancel(error)) {
      Notify('網(wǎng)絡(luò)請(qǐng)求中，請(qǐng)不要重復(fù)操作章蚣！')
    } else {
      const { response } = error
      console.log({
        dangerouslyUseHTMLString: true,
        message: `<p>請(qǐng)求接口: ${
          response.config.url
        }</p><p>請(qǐng)求方法 : ${
          response.config.method
        }</p><p>響應(yīng)狀態(tài) : ${response.status}</p><p>響應(yīng)信息 : ${
          response.statusText
        }</p>`
      })
    }
    store.commit('setLoading', false)
    return Promise.reject(error)
  }
)

export default service

api.js------接口文件

import service from './index.js'   //引入封裝好的axios

let o = {
    uid: '',
    token: ''
  }

//登錄頁(yè)面
export const login = {
  login (id,pwd) {
    return service.post('/user/login', { id_card: id, password: pwd })
  },
  ……
}

//個(gè)人中心
export const user = { 
  out () {
    return service.post('/user/logout', {...o})   // 在index.js里參數(shù)預(yù)處理檢測(cè)到這里需要token則賦值
  },
  ……
}

單頁(yè)面引入---login.vue

<script>
import { login } from '../service/api'
login.login(this.uid, this.pwd).then((res)=>{
        ……
        localStorage.setItem('userInfo', JSON.stringify(res))
 })
</script>

vuex---store/index.js定義全局loading

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: false
  },
  mutations: {
    setLoading (state, bool) {
      state.loading = bool
    }
  },
  actions: {
  },
  modules: {
  }
})

App.vue ------loading放app頁(yè)面 這里用的是vant的loading

<div id="app">
    <van-overlay :show="loading">
      <van-loading /> 
    </van-overlay>
    ……
<div>
<script>
import { mapState, mapMutations} from 'vuex'
export default {
  name: 'app',
  data(){
   return {
    }
  },
  computed:mapState([
    'loading'
  ]),
  methods:{
    ...mapMutations([
      'setLoading'
    ])
  }
}
</script>