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)
  }
}
相关文章
|
1天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
13 0
|
1天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`<router-link>`用于创建导航链接,`<router-view>`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
1天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
1天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
17 0
|
1天前
vue3打包war压缩包配置
vue3打包war压缩包配置
20 0
|
1天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
53 0
|
1天前
axios封装和配置
axios封装和配置
20 0
|
1天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
38 0
|
1天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
1天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件