vue项目中的axios配置与api模块化管理

vue项目中的axios配置与api模块化管理

1.目录结构：在src目录下新建apis文件夹，用于配置项目中的api接口

2.配置开发环境与生产环境的请求根路径baseUrl

config.js

// 生产环境
const prodConfigs = {
  apiHost: 'http://localhost:8000',
  staticHost: ''
}
// 开发环境
const localConfig = {
  apiHost: 'http://localhost:4000',
  staticHost: ''
}

let hostConfig = prodConfigs[location.hostname]
if (process.env.NODE_ENV === 'development') hostConfig = localConfig
window.loginUrl = location.hostname

export default hostConfig.apiHost
// 这里导出的就是 请求的baseUrl

3.配置axios

setup.js

// 封装的所有网络请求
import axios from 'axios'
import baseURL from './config.js'

// 正式环境 -- 请使用真实请求 -- start
const instance = axios.create({
  // 设置超时时间 -30秒
  timeout: 30000,
  // 请求的baseUrl
  baseURL: process.env.NODE_ENV === 'development' ? '/api' : baseURL,
  // 请求头部信息
  headers: {
    'Content-Type': 'application/json'
  },
  // 修改请求数据
  transformRequest: [
    function(data, headers) {
      return JSON.stringify(data)
    }
  ],
  // 跨域请求时允许携带凭证（cookie）
  withCredentials: process.env.NODE_ENV === 'production'
})

// 请求拦截
instance.interceptors.request.use(
  config => {
    // 为请求头对象添加，添加Token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 用户登录状态过期，路由重定向至登录界面
instance.interceptors.response.use(
  res => {
    if (res.data.code === '2001') {
      window.location.href = '//' + window.loginUrl
      return Promise.reject(res.data)
    }
    if (!res) {
      return Promise.reject(res)
    }
    return res.data
  },
  error => {
    return Promise.reject(error)
  }
)

// 前端阻止重复请求的最核心的方法是CanelToken
const CancelToken = axios.CancelToken

function addCancel(config, $this, cancel) {
  if ($this) {
    config.CancelToken = new CancelToken(function executor(c) {
      $this[cancel] = c
    })
  }
}

function createAPI(url, method, data, $this, cancel) {
  let config = {}
  if (method === 'post' || method === 'POST') {
    config = {
      method: 'post',
      url: url,
      data
    }
  } else {
    config = {
      method: 'post',
      url: url,
      params: data
    }
  }
  addCancel(config, $this, cancel)
  return instance(config)
}
// 正式环境 -- 请使用真实请求 -- end

export default createAPI

4.配置各个api模块

/apis/modules/common.js

/**
 * 公共模块
 */
import createAPI from '../setup'
const COMMON = {
    // 获取首页信息
    getHome: (data, $this, cancel) => createAPI('/shop/web/getHomePage', 'get', data, $this, cancel),
    // 注册
    userRegister: (data, $this, cancel) => createAPI('/shop/user/register', 'post', data, $this, cancel),
    // 登录
    userLogin: (data, $this, cancel) => createAPI('/shop/user/login', 'post', data, $this, cancel)
}

export default COMMON

5.将各个api模块集中管理

index.js

import COMMON from './modules/common'
import PRODUCT from './modules/product'
/**
 * 所有接口引用入口
 */
const apis = {
  ...COMMON,
  ...PRODUCT
}
export default apis

6.将apis挂载到Vue原型上

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入apis
import apis from './apis/index'
// vue原型挂载  请求接口函数
Vue.prototype.$apis = apis

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')