Axios：初探多功能HTTP客户端库的二次封装

2023-09-16 22:12:48

Axios介绍与简单二次封装

Axios是一个基于Promise的用于浏览器和Node.js的HTTP客户端库，可在浏览器和Node.js中使用。其最大的优势在于，它使我们能够轻松地发送异步HTTP请求，并能轻松地处理HTTP响应。

封装Axios库时，我们可以为其添加额外的功能，以满足我们特定的需求。例如，我们可以为请求和响应添加拦截器，以便在发送请求或收到响应时执行一些自定义的操作。

// 请求拦截
axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  return config;
}, (error) => {
  // 请求错误时做些什么
  return Promise.reject(error);
});

// 响应拦截
axios.interceptors.response.use((response) => {
  // 在收到响应时做些什么
  return response;
}, (error) => {
  // 响应错误时做些什么
  return Promise.reject(error);
});

2. 统一请求配置

对于一些通用的配置，如baseURL、headers等，我们也可以将其封装在Axios库中，这样就可以避免在每次发送请求时都要重复配置这些信息。

// axios实例的统一配置
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  }
});

3. 使用Axios进行请求

封装Axios库之后，就可以在应用中使用它来发送请求了。可以使用axios实例或直接使用axios进行请求。

// 使用axios实例发送请求
axiosInstance.get('/users').then((response) => {
  // 处理响应数据
});

// 直接使用axios发送请求
axios.get('/users').then((response) => {
  // 处理响应数据
});

4. Vue2和Vue3中封装Axios

在Vue2和Vue3中，我们可以分别使用Vue.js插件或Vue.jsComposition API来封装Axios库。

4.1 Vue2封装

在Vue2中，可以使用Vue.js插件来封装Axios库。

// axios.js (Vue.js插件)
import axios from 'axios';

export default {
  install(Vue) {
    Vue.prototype.$axios = axios;
  }
};

// main.js
import axiosPlugin from './axios.js';
Vue.use(axiosPlugin);

4.2 Vue3封装

在Vue3中，可以使用Vue.jsComposition API来封装Axios库。

// axios.js (Vue.jsComposition API)
import axios from 'axios';

export default function useAxios() {
  const axiosInstance = axios.create({
    baseURL: 'https://api.example.com',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    }
  });

  return axiosInstance;
}

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

export default {
  setup() {
    const axios = useAxios();

    axios.get('/users').then((response) => {
      // 处理响应数据
    });

    return {
      axios
    };
  }
};