封装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)
相关推荐
naice7 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼11 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin16 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗19 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69633 分钟前
CSS-响应式布局
前端
三小河37 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法41 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku42 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js