vue3 get请求和post请求全局引入

在 Vue3 中，可以使用 Axios 库来进行 HTTP 请求。如果你想要在全局范围内引入 Axios 并且能够在 Vue 组件中直接使用它，可以按照以下步骤进行操作：

1. 安装 Axios

在终端中执行以下命令安装 Axios：

npm install axios

2. 创建 axios 实例

在项目根目录下创建一个 `http.js` 文件，用来创建 axios 实例并进行全局配置。

import axios from 'axios'

// 创建 axios 实例
const http = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
})

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default http

上述代码中，我们通过 `axios.create` 方法创建了一个 axios 实例，并进行了全局配置，包括设置了请求的基础 URL 和超时时间。同时，我们还设置了请求拦截器和响应拦截器，用于在请求和响应时进行一些处理。

3. 注册为 Vue 插件

在 `main.js` 中注册 `http.js` 为 Vue 插件，这样就可以在 Vue 组件中直接使用 `$http` 对象进行请求了。

import { createApp } from 'vue'
import App from './App.vue'
import http from './http'

const app = createApp(App)

// 注册为 Vue 插件
app.config.globalProperties.$http = http

app.mount('#app')

现在，你就可以在 Vue 组件中直接使用 `$http` 对象进行请求了。例如：

export default {
  mounted() {
    this.$http.get('/users')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}