封裝axios統一請求

1、我們可以在utils文件夾文件新建request文件夾

import axios from 'axios'
import Vue from 'vue'
import ase from './ase'
// import utils from './utils'
import store from '../store'
import { getToken } from '@/utils/auth'
import Qs from 'qs'

// 定義文件url頭部
// 本地mock
const url = process.env.ENV_CONFIG === 'dev' ? '/api' : process.env.BASE_API

// 創建axios實例
const service = axios.create({
  baseURL: url, // api 的 base_url
  timeout: 10000, // 請求超時時間
  transformRequest: [
    function (data) {
      return Qs.stringify(data)
    }
  ]
})
/**
  * 提示函數
  * 禁止點擊蒙層、顯示一秒后關閉
  */
const tip = res => {
  // Vue.$vux.toast.show({
  //   text: res,
  //   time: 5000,
  //   type: 'warn',
  //   position: 'middle'
  // })
  Vue.$vux.toast.text(res, 'middle')
}

/**
* 請求失敗后的錯誤統一處理
* @param  status 請求失敗的狀態碼
*/
const errorHandle = (status, other) => {
  // 處理響應數據
  // 400 : 參數格式或者字段名錯誤
  // 401 : token錯誤、過期
  // 403: 無權限
  // 500 ： 服務錯誤
  // 狀態碼判斷
  switch (status) {
    case 400:
      tip('請求無效')
      break
    case 404:
      tip('請求的資源不存在')
      break
    case 403:
      tip('無訪問權限，請聯系管理員！')
      break
    case 500:
      tip('服務端錯誤，請聯系管理員！')
      break
    default:
      console.log(other)
  }
}
// console.log('統一的baseURL . ' + process.env.BASE_API)
// request攔截器
service.interceptors.request.use(
  config => {
    Vue.$vux.loading.show({ text: '加載中...' })

      if (store.getters.token) {

          config.headers['X-Token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改

       }

    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    /**
     * code為非200是拋錯 可結合自己業務進行修改
     */
    Vue.$vux.loading.hide()
    // console.log(store.state.isEncrypt, '讀取vuex值')
    const isEncrypt = store.state.isEncrypt
    const res = isEncrypt ? ase.DecryptEcb(response.data) : response.data
    if (res.code === 200) {
      return res
    } else {
      // 請求已發出，但是不在2xx的范圍
      errorHandle(res.code, res.msg)
      return Promise.reject(res.msg)
    }
  },
  error => {
    Vue.$vux.loading.hide()
    // 處理響應失敗
    if (error.message.includes('timeout')) { // 判斷請求異常信息中是否含有超時timeout字符串

        tip( ' 網絡超時，請聯系管理員! ' )

return Promise.reject(error) // reject這個錯誤信息
 } return Promise.reject(error) } ) export default service

api管理文件引用方法，在需要運用的文件里面例如api.js

import request from '@/utils/request'
// 本地模擬mock
export function sportList (params) {
  return request({
    url: '/index.json',
    method: 'get',
    params
  })
}

組件里面引用

import { sportList } from '@/api/schedule'

method: {
    getSportList() {
      sportList().then(res => {
        this.project = res.data
        this.$nextTick(() => {
          // 比賽日程返回滾動到相應的大項位置
          if (this.$utils.getSession('isScroll')) {
            if(this.$utils.getSession('projectScrollTop')) {
              this.$refs.content.scrollBy(0, this.$utils.getSession('projectScrollTop'))
              this.$utils.clearOneSession('isScroll')
              this.$utils.clearOneSession('projectScrollTop')
            }
          }
        })
      })
    }
}