封装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)
相关推荐
远望清一色15 分钟前
基于MATLAB的实现垃圾分类Matlab源码
开发语言·matlab
GIS程序媛—椰子21 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
confiself24 分钟前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
DogEgg_00127 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端30 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x33 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100934 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
XiaoLeisj36 分钟前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee
杜杜的man39 分钟前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*40 分钟前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go