Vue的Axios封装

Axios是一个基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。在Vue项目中，使用Axios可以方便地与后端进行数据交互。封装Axios可以提高代码的复用性和可维护性。本文将介绍如何在Vue项目中封装Axios，并提供代码示例。

1. 安装Axios

首先，我们需要在Vue项目中安装Axios。可以使用npm或yarn进行安装。

npm install axios

# 或者

yarn add axios

安装完成后，在需要使用Axios的地方引入Axios。

import axios from 'axios';

2. 创建Axios实例

为了方便后续的封装和使用，我们可以在项目中创建一个Axios实例。可以通过配置实例的默认属性来统一处理请求和响应。

const instance = axios.create({
  baseURL: ' // 设置请求的基本URL
  timeout: 10000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头部
  },
});

3. 封装请求方法

GET请求

封装GET请求的方法，可以通过传入参数来发送请求。这里使用async/await来处理异步请求。

async function get(url, params) {
  try {
    const response = await instance.get(url, { params });
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
}

POST请求

封装POST请求的方法，可以通过传入参数来发送请求。这里使用async/await来处理异步请求。

async function post(url, data) {
  try {
    const response = await instance.post(url, data);
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
}

其他请求方法

类似地，可以封装其他的请求方法，如PUT、DELETE等。

async function put(url, data) {
  try {
    const response = await instance.put(url, data);
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
}

async function del(url) {
  try {
    const response = await instance.delete(url);
    return response.data;
  } catch (error) {
    throw new Error(error.message);
  }
}

4. 使用封装的Axios

通过封装的Axios，我们可以在Vue项目中方便地发送HTTP请求。下面是一个简单的示例，演示如何发送GET和POST请求。

// 在Vue组件中使用封装的Axios

async mounted() {
  try {
    // 发送GET请求
    const data = await get('/api/users', { page: 1, limit: 10 });
    console.log(data);

    // 发送POST请求
    const response = await post('/api/users', { name: 'John Doe', age: 25 });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

5. 封装请求拦截器和响应拦截器

Axios提供了请求拦截器和响应拦截器，可以在请求前和请求后做一些处理。我们可以通过实例的interceptors属性来添加拦截器。

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理，如加入token等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在响应数据之前做一些处理
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

6. 错误处理

在封装的Axios中，可以通过try/catch来捕获请求错误，并统一处理。

try {
  const response = await instance.get('/api/users');
  console.log(response.data);
} catch (error) {
  console.error(error.message);
}

7. 总结

通过封装Axios，我们可以在Vue项目中方便地发送HTTP请求，并统一处理请求和响应。这样可以提高代码的复用性和可维护性，使代码更加清晰和