Vue3.0的axios封装教程

Vue3.0是目前比较流行的前端框架之一，而axios则是目前比较常用的前端数据请求工具。 axios是基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。Vue3.0在封装axios方面也有很多值得我们学习的思路和方法。本篇文章将从多个方面对Vue3.0中axios的封装做出详细阐述。

一、安装和初始化axios

在使用Vue3.0中的axios之前，我们需要先安装axios。可以通过npm进行安装：

npm install axios --save

然后在main.js中，我们可以将axios挂载到Vue的原型链上，这样我们在组件中就可以通过this.$axios来使用axios

//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'

Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '
   '
})

二、axios的全局配置

在Vue3.0中，我们可以通过axios.create()方法创建一个axios实例，并配置一些全局属性。例如设置请求的基本URL，设置请求头等等。 在main.js中可以这样配置：

//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'

const http = axios.create({
  baseURL: 'http://api.example.com/'
})

//可以设置请求头
http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
Vue.prototype.$http = http

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '
   '
})

三、axios的拦截器

拦截器是axios中非常重要的功能之一，可以在请求发出前和响应返回前进行拦截，用来处理请求或响应的一些共性操作。 Vue3.0中提供了一种捕获全局错误并把错误信息反馈给用户的方式，使用axios拦截器可以很容易地实现这样的功能。

const http = axios.create({
  baseURL: 'http://api.example.com/'
})

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

//添加响应拦截器
http.interceptors.response.use(function (response) {
  //对响应数据做点什么
  return response;
}, function (error) {
  //如果捕获到了401状态码，说明登录过期或者未登录，就可以弹出登录框，请用户重新登录
  if (error.response.status === 401) {
    //弹出登录框逻辑
  }
  // 对响应错误做点什么
  return Promise.reject(error);
});

四、封装axios的request方法

在使用axios进行请求的时候，我们可以根据需要在组件中多次调用，但这样会将一些公共的请求参数反复写入组件。我们可以将这些共性操作封装在一个request方法中，方便多次使用。例如：

//在api.js中
import axios from "axios";

const instance = axios.create({
  baseURL: "http://api.example.com",
  timeout: 10000
});

const request = async (options) => {
  try {
    const response = await instance(options);
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export { request, instance };

在组件中直接引入并使用：

//在组件中
import { request } from "@/api";

const getUser = async () => {
  const data = await request({
    method: "get",
    url: "/users",
    params: {
      id: 1,
    },
  });

  console.log(data);
};

总结

本篇文章通过多个方面对Vue3.0中axios的封装做出详细阐述。首先介绍了axios的安装和初始化，然后引入了全局配置和拦截器两种功能，最后介绍了将多次使用的请求封装在一个request方法中的技巧。通过这些方式，我们可以更加简便地使用axios，并可以进行一些全局的错误处理、基础URL配置等功能。