vue3的axios怎么用

使用 Vue3 的 axios 可以按照以下步骤进行：

1. 安装 axios：

   npm install axios

2. 在需要使用的组件中引入 axios：

   import axios from 'axios'

3. 发送 GET 请求：

   axios.get('/api/data').then(response => {
     console.log(response.data)
   }).catch(error => {
     console.log(error)
   })

4. 发送 POST 请求：

   axios.post('/api/data', {
     data: 'hello world'
   }).then(response => {
     console.log(response.data)
   }).catch(error => {
     console.log(error)
   })

注意：在 Vue3 中，axios 的使用方式与 Vue2 中的使用方式基本相同，只是需要通过 import 引入 axios。另外，Vue3 中也推荐使用 fetch 来代替 axios，因为 fetch 是原生的浏览器 API，更加轻量级。

相关问题

vue3 axios使用

在 Vue3 中使用 Axios 需要先安装 Axios 库，可以在命令行中使用以下命令进行安装：

npm install axios

安装完成后，可以在需要使用 Axios 的 Vue3 组件或文件中引入该库：

import axios from 'axios'

然后就可以使用 axios 进行网络请求了，例如：

axios.get('/api/data').then(response => {
  console.log(response.data)
})

当然你也可以使用其他的 HTTP 请求方法，例如 POST：

axios.post('/api/data', { name: 'example' }).then(response => {
  console.log(response.data)
})

vue3axios封装与使用

Vue3Axios是一个基于Vue3和Axios的网络请求库。下面是Vue3Axios的封装和使用步骤：

1. 安装Vue3Axios

你可以通过npm或者yarn安装Vue3Axios：

npm install vue3-axios --save

或者

yarn add vue3-axios

2. 封装Vue3Axios

在src目录下新建一个api目录，用于封装Vue3Axios。在api目录下新建一个index.js文件，用于封装Vue3Axios的实例。代码如下：

import axios from 'axios'
import { reactive } from 'vue'

const instance = axios.create({
  baseURL: 'http://localhost:3000', // 接口的基础路径
  timeout: 10000 // 超时时间
})

const state = reactive({
  loading: false // 请求状态
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    state.loading = true // 请求开始，loading为true
    return config
  },
  error => {
    state.loading = false // 请求出错，loading为false
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    state.loading = false // 响应结束，loading为false
    return response
  },
  error => {
    state.loading = false // 响应出错，loading为false
    return Promise.reject(error)
  }
)

export default {
  get(url, params) {
    return instance.get(url, { params })
  },

  post(url, data) {
    return instance.post(url, data)
  },

  put(url, data) {
    return instance.put(url, data)
  },

  delete(url) {
    return instance.delete(url)
  },

  state // 请求状态
}

在这段代码中，我们使用了Vue3的reactive函数来实现数据响应式，同时封装了四个常用的网络请求方法，并且添加了请求和响应拦截器来处理请求状态。

3. 使用Vue3Axios

在组件中使用封装好的Vue3Axios。代码如下：

<template>
  <div>
    <div v-if="api.state.loading">正在加载...</div>
    <div v-else>{{ result }}</div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data() {
    return {
      result: ''
    }
  },

  mounted() {
    api.get('/api/test').then(res => {
      this.result = res.data
    })
  }
}
</script>

在组件中，我们通过导入封装好的Vue3Axios实例，来进行网络请求。在请求过程中，我们可以使用reactive函数封装的state对象来获取请求状态。