vue3 访问后台接口实现

在Vue3中访问后台接口可以使用Axios库。Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境中。Axios可以实现在浏览器中发送GET、POST、PUT、DELETE等HTTP请求，并且可以处理返回的响应数据。

首先，需要在Vue3项目中安装Axios依赖：

npm install axios

接着，在Vue3项目中创建一个api.js文件，用于封装Axios库的请求：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

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

// respone拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 20000) {
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  })

export default service

在上述代码中，我们创建了一个Axios实例，并且定义了请求拦截器和响应拦截器。

接着，在Vue3组件中使用Axios请求数据：

import axios from '@/api'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      axios.get('/api/list').then(response => {
        this.list = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在上述代码中，我们使用Axios发送了一个GET请求，请求的URL为`/api/list`，并且在请求成功后将返回的数据赋值给了组件的`list`属性。

以上就是在Vue3中访问后台接口的实现方法。