Vue3 配置代理和使用全局axios请求数据

简介: Vue3 配置代理和使用全局axios请求数据


vue3中配置全局代理和使用axios向服务器请求数据

main.ts

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import axios from 'axios'               // 引入axios
axios.defaults.baseURL = '/api'         
const app = createApp(App)  指向Vue
app.config.globalProperties.$rqst= axios 下挂载
app.use(VueAxios, axios)
app.use(store)
app.use(router)
app.mount('#app')

手动在vue3项目中创建vue.config.js,配置proxy

// const webpack = require('webpack');
// const webpack = require('webpack');
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir:"statics",
  indexPath:"index.html",
  productionSourceMap: process.env.NODE_ENV !== 'production'? false : true,
  /* webpack-dev-server 相关配置 */
  devServer: { 
    /* 使用代理 */
    proxy: {
        '/api': {
            target: 'http://xxxx.xxxx.xxxx.xxxx:xxxx/',  // 目标代理服务器地址
            changeOrigin: true,                          // 允许跨域
            pathRewrite:{
              "^/api":''
            }
        },
    },
 },
}

某组件中使用请求

import { defineComponent, getCurrentInstance} from 'vue';
export default defineComponent({
  name:'name',
  props:{
    datas:{
        type: Object,
        default: function(){
            return {......};
        }
    }
  },
  //  setup 在整个组件生命周期前执行一次且仅一次,可以在这时获取全局参数的代理对象
  setup(props) {
    let datas = (props as any).datas;                  // 组件参数对象
    const { proxy } = (getCurrentInstance() as any);   // 全局变量代理对象
    return{
        proxy
    }
  },
  methods: {
      // 可以在 methods 中定义请求的函数以备调用
      getCodeList(user:string){
        this.proxy.$rqst.post('/mycode/getCodeList',{"user":user})
        .then((response: any)=>{
          ......
        });
      },
  },
});
目录
相关文章
|
11月前
|
资源调度 JavaScript
|
JavaScript API
Vue3基础(十qi)___安装使用axios
本文介绍了如何在Vue3项目中安装和使用axios进行HTTP请求,包括在main.js中引入axios并挂载到全局属性,以及在组件中通过`getCurrentInstance`获取全局axios实例来发送请求的方法。
139 1
Vue3基础(十qi)___安装使用axios
|
11月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
764 1
|
11月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
11月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
476 1
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
408 0
|
9天前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
25 1
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
11月前
|
缓存 JavaScript 搜索推荐