vue —— api、axois封装

结构

模块中各个api文件引用base.js、http.js中的方法
api.js中引用模块中各个api文件，并使用exports导出

base.js

vue代理路由地址

// 接口域名管理
const base = {
  apiUrl : 'http://192.100.100.135:1001'
}
export default base

http.js

vue路由处理，axois封装、路由拦截器，使用了element UI中的全局loading方法，不加loading的也有

import Vue from 'vue'
import Axios from 'axios'
import Store from '../store'
import Router from '../router/index'
import { Loading } from 'element-ui'

let v = new Vue()
const goLogin = () => {
  sessionStorage.setItem('token', '')
  Router.push('/login')
}

let loading = null
function startLoading () { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '数据加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
function endLoading () { // 使用Element loading-close 方法
  loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

function checkCode (response) {
  if (!response) {
    v.$message({
      message: '网络连接断开!',
      type: 'error',
      duration: 2000
    })
  }
  if (response.code === '0') {
    return response
  }
  if (response.code === '0000000001') {
    v.$message({
      message: '登录过期!',
      type: 'error',
      duration: 2000
    })
    goLogin()
    return false
  } else {
    v.$message({
      message: response.message,
      type: 'warning',
      duration: 2000
    })
    return false
  }
}

const instance = Axios.create({ timeout: 1000 * 20 })
const instance1 = Axios.create({ timeout: 1000 * 20 })

// 请求拦截器
instance.interceptors.request.use(
  config => {
    config.timeout = 50000
    const AUTH_TOKEN = sessionStorage.getItem('token')
    config.headers.common['Authorization'] = AUTH_TOKEN
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 不带loading响应拦截器
instance.interceptors.response.use(
  response => {
    if (
      response.data === null &&
      response.config.responseType === 'json' &&
      response.request.responseText !== null
    ) {
      try {
        response.data = JSON.parse(response.request.responseText)
      } catch (e) {}
    }
    return response.data
  },
  error => {
    return Promise.resolve(error.response)
  }
)
// 带loading响应
instance1.interceptors.request.use(
  config => {
    config.timeout = 50000
    const AUTH_TOKEN = sessionStorage.getItem('token')
    config.headers.common['Authorization'] = AUTH_TOKEN
    showFullScreenLoading()
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
instance1.interceptors.response.use(
  response => {
    if (
      response.data === null &&
      response.config.responseType === 'json' &&
      response.request.responseText !== null
    ) {
      try {
        response.data = JSON.parse(response.request.responseText)
      } catch (e) {
        //
      }
    }
    tryHideFullScreenLoading()
    return response.data
  },
  error => {
    tryHideFullScreenLoading()
    return Promise.resolve(error.response)
  }
)

export const request = function (method, url, data) { 
// 暴露 request 给我们好API 管理
  method = method.toLocaleLowerCase()
  if (method === 'post') {
    return instance.post(url, data).then((response) => {
      return checkCode(response)
    })
  } else if (method === 'get') {
    // 时间戳
    data = {
      timestamp: Date.now(),
      ...data
    }
    return instance.get(url, {
      params: data
    }).then((response) => {
      return checkCode(response)
    })
  }
}
// loading
export const request1 = function (method, url, data) { 
// 暴露 request 给我们好API 管理
  method = method.toLocaleLowerCase()
  if (method === 'post') {
    return instance1.post(url, data).then((response) => {
      return checkCode(response)
    })
  } else if (method === 'get') {
    // 时间戳
    data = {
      timestamp: Date.now(),
      ...data
    }
    return instance1.get(url, {
      params: data
    }).then((response) => {
      return checkCode(response)
    })
  }
}

API模块接口

request: 接口加载没有loading显示
request1: 接口加载过程中显示loading效果

// 模块接口
import base from '../base'
import { request, request1 } from '../http'

export default {
  login: promise => request('post', `${base.apiUrl}/login`, promise),
  login1: promise => request1('get', `${base.apiUrl}/login`, promise)
}

使用

api.js记得引入main.js中，并挂载
页面使用

async Func () {
	const { data } = await this.$api.模块名称.接口名称()
	if (data) {
		//接口调取成功后操作
	}
}