Vue axios 初始化配置(自用)

简介: Vue axios 初始化配置(自用)
$ npm install --save axios vue-axios
import axios from 'axios'
import VueAxios from 'vue-axios'
import Pub from '@/utils/public'
// 创建 axios 实例
const service = axios.create({
  // api
  baseURL: '',
  // 请求超时时间
  timeout: 90000
})
// 将 post 请求的 data 数据转换成 formdata 格式(请求数据设置为 params 不会被转换)
service.defaults.transformRequest = (data) => {
  return Pub.FORM_DATA(data)
}
// 添加请求拦截器
service.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  // 附带 token
  const token = Pub.ACCESS_TOKEN()
  if (token) { config.headers['X-Token'] = token }
  // console.log(config)
  return config
})
// 添加响应拦截器
service.interceptors.response.use((response) => {
  // 对响应数据做点什么
  // console.log(response)
  return response
})
// 全局导入
const install = {
  install (Vue) {
    Vue.use(VueAxios, service)
  }
}
// 导出
export {
  // 用于 main.js 全局导入
  install as VueAxios,
  // 用于页面请求
  service as axios
}
  • main.js
// axios
import { VueAxios } from '@/api/axios'
Vue.use(VueAxios)
// (获取 || 设置) token
ACCESS_TOKEN (token) {
  if (token === undefined) {
    return Vue.ls.get('token')
  } else {
    return Vue.ls.set('token', token)
  }
}
相关文章
|
6月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
243 1
|
资源调度 JavaScript
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
434 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
12月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
971 4
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
缓存 JavaScript 搜索推荐
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
1123 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2594 4
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
316 3
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
2039 4