封装axios、环境变量、api解耦、解决跨域、全局组件注入

官网:Axios中文文档 | Axios中文网

安装:npm install axios

axios封装:

javascript 复制代码
// 1. 引入axios
import axios from "axios";
import storage from '@/utils/storage'
// 2. 创建axios实例
const instance = axios.create({
   baseURL: process.env.VUE_APP_TITLE === '小政生产环境' ? process.env.VUE_APP_BASE_API : '',
   timeout: 50000
});
 
// 3. 添加请求拦截器
instance.interceptors.request.use(function (config) {
  config.headers.Authorization = storage.getItem('token') // 这里是携带的token
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
// 4. 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
 
// 5. 抛出去
export default instance;

环境变量:

与src目录同级新建.env.production和.env.development文件

javascript 复制代码
// .env.production

VUE_APP_TITLE = '小政生产环境' // 必须以VUE_APP开头

VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头

// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看
javascript 复制代码
// .env.development

VUE_APP_TITLE = '小政开发环境' // 必须以VUE_APP开头

VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头

// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看

api解耦:

全局写法:

javascript 复制代码
// api/index.js

import user from './user'

export default {
  ...user
}
javascript 复制代码
// api/user.js

import axios from "@/utils/axios";

export default {
  getUser: (params) => axios.post('/api/v1/login', params)
}
javascript 复制代码
// main.js

import api from '@/api'

/* 注册api */
Vue.use(api)

局部写法:

javascript 复制代码
// api/user.js
import axios from "@/utils/axios";
export function login(data) {
  return axios({
    url: '/login',
    method: 'post',
    data
  })
}
 
export function loginUser () {
  return axios({
      url: '/user/loginUser',
      method: 'get'
  })
}
html 复制代码
<template>
  <div>
    测试接口请求
  </div>
</template>

<script>
import { login, loginUser } from '@/api/user.js'
export default {
  methods: {
    FetchLoginUser () {
      loginUser().then(res => {
        console.log('result:', res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

解决跨域:

javascript 复制代码
// vue.config.js

devServer: {
  proxy: {
    // 代理
    '/api': {
      target: 'http://xxx.xxx.xx.xxx:xxxx', // 代理的地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // 选择忽略拦截器里面的内容
      }
    }
  }
}

全局组件注入:

与src目录同级新建installComponents

javascript 复制代码
// installComponents/installComponents.js

/* 自动化注册组件 */
export default (Vue) => {
  const requireComponent = require.context(
    // 其组件目录的相对路径
    '@/components',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\.(vue|js)$/
  )
  /* 这里循环出来的是components下的每一个文件夹 */
  requireComponent.keys().forEach((path) => {
    const content = requireComponent(path).default
    /* 连js后缀名一起注册 */
    if (content.name) {
    /* content.name 文件夹名 content文件夹内容 */
      Vue.component(content.name, content)
    } else {
      Vue.use(content)
    }
  })
}
javascript 复制代码
// main.js
import installComponents from './installComponents/installComponents'

Vue.use(installComponents)
相关推荐
zhangjr057512 分钟前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱24 分钟前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
zongzi_49429 分钟前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
kikyo哎哟喂39 分钟前
Java 代理模式详解
java·开发语言·代理模式
木子七41 分钟前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
duration~1 小时前
SpringAOP模拟实现
java·开发语言
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
就爱六点起1 小时前
C/C++ 中的类型转换方式
c语言·开发语言·c++