Vue---- Vue 3.x 中全局配置axios

简介: Vue---- Vue 3.x 中全局配置axios

vue 3.x 中全局配置 axios

0 安装 axios

npm i axios

1. 为什么要全局配置 axios

在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求。

此时会遇到如下两个问题:

① 每个组件中都需要导入 axios(代码臃肿)

② 每次发请求都需要填写完整的请求路径(不利于后期的维护)

2. 如何全局配置 axios

在 main.js 入口文件中,通过 app.config.globalProperties全局挂载 axios。

import { createApp } from 'vue'
// import App from './App.vue'
// import App from './components/myEvent/App.vue'
// import App from './components/v-model/App.vue'
// import App from './components/watch/App.vue'
// import App from './components/live/App.vue'
// import App from './components/fatherSon/App.vue'
// import App from './components/brother/App.vue'
import App from './components/grand/App.vue'
// 导入axios
import axios from 'axios'
import './index.css'
// 创建 Vue 实例对象
const app = createApp(App)
// 设置 axios 的请求根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 将 axios 挂载为 app 的全局自定义属性
// 每个组件可以通过 this 直接访问到全局挂载的自定义属性
app.config.globalProperties.$http = axios
app.mount('#app')

3. 发起get请求

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="get">发起get请求</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    async get() {
      // axios 返回的为 Promise 对象
      // 对返回的对象进行解构,获取其中的 data
      // 第一个参数为请求的路径,第二次参数为请求携带的数据
      const { data: res } = await this.$http.get( '/api/get', {
        params: {
          name: 'zs',
          age: 33
        }
      } )
      console.log( res )
    }
  }
}
</script>
<style>
</style

4. 发起post请求

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="get">发起get请求</button>
    <button @click="post">发起post请求</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    async get() {
      // axios 返回的为 Promise 对象
      // 对返回的对象进行解构,获取其中的 data
      // 第一个参数为请求的路径,第二次参数为请求携带的数据
      const { data: res } = await this.$http.get( '/api/get', {
        params: {
          name: 'zs',
          age: 33
        }
      } )
      console.log( res )
    },
    async post() {
      // 第一个参数为请求地址
      // 第二个参数为请求携带的数据
      const { data: res } = await this.$http.post( '/api/post', {
        name: 'zs',
        gender: '男'
      } )
      console.log(res)
    }
  }
}
</script>
<style>
</style>


相关文章
|
8天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
31 1
|
10天前
|
JavaScript 编译器 API
vue2和vue3区别
vue2和vue3区别
15 4
|
8天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
36 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
9天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
9天前
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页
|
9天前
|
前端开发 JavaScript
vue3中覆盖组件样式的方法
vue3中覆盖组件样式的方法