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

下面我将详细讲解"Vue3引入axios封装接口的两种方法实例"这个话题。

1. 什么是axios

axios是一个基于Promise的HTTP框架， 可以用于浏览器和node.js，同时也是Vue.js官方推荐的第三方库之一，让前端开发人员可以轻松地向服务器发送 HTTP 请求以及以一种优雅的方式处理服务器端的响应。

2. 在Vue3中引入axios

下面介绍两种在Vue3中引入axios的方法：

2.1 第一种方法：封装axios

封装axios方法可以更好地管理请求的错误和响应，可以把axios的请求和响应拦截器统一写在一起。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your.api.url',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
});

// 请求发送前拦截
instance.interceptors.request.use(
  (config) => {
    // 加入自定义请求头、请求体等等
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应后拦截
instance.interceptors.response.use(
  (response) => {
    const { data } = response;
    // 处理后端返回的非正常响应，如 token 失效等
    if (data.res === 0) {
      console.warn('token is invalid');
      localStorage.removeItem('token');
    }
    return response;
  },
  (error) => 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, params = {}) {
    return instance.delete(url, { params });
  },
};

在Vue3的组件中使用：

<template>
  <p>{{users}}</p>
</template>

<script>
import axios from '@/utils/request';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    axios.get('/api/users')
      .then(res => {
        this.users = res.data;
      })
      .catch(err => {
        console.error(err);
      });
  },
};
</script>

2.2 第二种方法：在Vue3中集成axios

在Vue3可以全局注册axios方法，然后在组件中直接使用。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.baseURL = 'http://your.api.url';

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.mount('#app');

在Vue3的组件中使用：

<template>
  <p>{{users}}</p>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.$axios.get('/api/users')
      .then(res => {
        this.users = res.data;
      })
      .catch(err => {
        console.error(err);
      });
  },
};
</script>

总结

以上两种方法都可以实现在Vue3中引入axios请求，并且第一种方法还可以对请求和响应进行拦截处理，更好的管理请求和响应。