Vue3引入axios封装接口的两种方法实例

1、通过全局定义Vue.prototype.$http

Vue.prototype.$http = axios

将axios挂载到Vue原型上后，就可以在所有的Vue组件中直接调用this.$http.xxx()方法，发送请求。例如：

this.$http.get('/api/users').then(response => {

  console.log(response.data)

}).catch(error => {

  console.log(error)

})

2、通过创建Http.js文件并导出封装好的axios实例

// Http.js

import axios from 'axios'

const http = axios.create({

  baseURL: '/api',

  timeout: 5000

})

http.interceptors.request.use(config => {

  // 拦截请求的配置信息，比如加上token

  // config.headers['Authorization'] = localStorage.getItem('token')

  return config

}, error => {

  return Promise.reject(error)

})

http.interceptors.response.use(response => {

  // 拦截响应结果，比如处理通用的错误码

  if (response.status === 200) {

    return response.data

  } else {

    // 错误处理...

  }

}, error => {

  return Promise.reject(error)

})

export default http

然后在需要发送请求的组件中，引入Http.js文件，使用http.xxx()方法发送请求。

import http from '@/utils/Http.js'

http.get('/users').then(response => {

  console.log(response)

}).catch(error => {

  console.log(error)

})

以上是两种常见的封装axios请求的方法，可以选择适合自己项目的方式来进行封装，使其更符合自己的项目需求和方便维护。在实际项目中，我们需要考虑接口的请求统一配置、拦截请求/响应结果、错误处理等问题，才能用好axios来发送请求。