vue中axios的封装问题(简易版拦截,get,post)

Vue中Axios的封装

Axios是基于Promise的HTTP库，适用于浏览器和Node.js平台，可以在Vue中使用Axios进行网络请求。在实际开发中，我们通常需要将Axios进行封装，使它更加符合我们的业务需求，提高代码的复用性和维护性。

Axios的封装目的

Axios的封装主要有以下几个目的：

1. 方便统一处理网络请求的异常，如超时、401/403等错误状态码。
2. 简化网络请求的调用方式，如定义API接口、封装get/post等请求方法。
3. 提高代码的复用性和维护性，减少重复代码。

简单封装方法

下面是基于Axios简单封装的示例代码：

安装Axios

在使用Axios之前，需要先安装Axios库。可以使用npm或yarn来安装。

# 使用npm安装
npm install axios --save

# 使用yarn安装
yarn add axios

引入Axios并创建实例

在Vue中使用Axios，需要先引入Axios，并创建一个Axios的实例。

// 引入Axios
import axios from 'axios';

// 创建Axios实例
const instance = axios.create({
  // 设置请求超时时间
  timeout: 5000
});

封装get请求

在Axios的实例中，封装get请求非常简单，只需要对响应结果进行一次简单处理，即可返回数据。

/**
 * Get请求方法封装
 * @param url 请求地址
 * @param params 请求参数
 */
export const get = (url, params) => {
  return instance.get(url, { params })
    .then(response => {
      return response.data;
    })
    .catch(error => {
      console.error(`[Axios] GET请求出错: ${error}`);
      return Promise.reject(error);
    });
};

封装post请求

在Axios的实例中，封装post请求需要对请求头和请求体进行相应的设置。

/**
 * Post请求方法封装
 * @param url 请求地址
 * @param data 请求参数
 */
export const post = (url, data) => {
  return instance.post(url, data, {
    // 设置请求头类型
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    return response.data;
  })
  .catch(error => {
    console.error(`[Axios] POST请求出错: ${error}`);
    return Promise.reject(error);
  });
};

完整封装方法

对于复杂的业务场景，以上简单封装的方法可能已经不能满足要求，需要对Axios进行更完整的封装。

下面是更完整的封装示例代码：

异常拦截处理

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 如需统一设置请求头
    // config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    console.error(`[Axios] 请求拦截器出错: ${error}`);
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    const { data, status } = response;
    return {
      data,
      status,
    };
  },
  error => {
    console.error(`[Axios] 响应拦截器出错: ${error}`);
    const { response } = error;
    if (response) {
      const { status, data } = response;
      // 统一处理401/403等错误状态码
      if (status === 401 || status === 403) {
        console.error(`[Axios] 请求${response.url}出现了${status}错误`);
        return Promise.reject(error);
      } else {
        return Promise.reject(error);
      }
    } else {
      console.error(`[Axios] 请求${error.request.url}超时`);
      return Promise.reject(new Error('请求超时，请稍后重试！'));
    }
  }
);

API接口定义

const API_ROOT = 'http://localhost:8080/api';

export const API = {
  LOGIN: `${API_ROOT}/login`,
  LOGOUT: `${API_ROOT}/logout`,
  USERS_LIST: `${API_ROOT}/users/list`,
};

请求方法封装

/**
 * Get请求方法封装
 * @param url 请求地址
 * @param params 请求参数
 */
export const get = (url, params) => {
  return instance.get(url, { params })
    .then(response => {
      return response.data;
    })
    .catch(error => {
      console.error(`[Axios] GET请求出错: ${error}`);
      return Promise.reject(error);
    });
};

/**
 * Post请求方法封装
 * @param url 请求地址
 * @param data 请求参数
 */
export const post = (url, data) => {
  return instance.post(url, data, {
    // 设置请求头类型
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    return response.data;
  })
  .catch(error => {
    console.error(`[Axios] POST请求出错: ${error}`);
    return Promise.reject(error);
  });
};

/**
 * 登录接口封装
 * @param params 请求参数
 */
export const login = (params) => {
  return post(API.LOGIN, params);
};

/**
 * 登出接口封装
 */
export const logout = () => {
  return post(API.LOGOUT);
};

/**
 * 用户列表接口封装
 * @param params 请求参数
 */
export const userList = (params) => {
  return get(API.USERS_LIST, params);
};

示例1：使用封装后的get请求示例

import { userList } from '@/api/index';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.loadUsers();
  },
  methods: {
    loadUsers() {
      userList({})
        .then(data => {
          this.users = data;
        })
        .catch(error => {
          console.error(`获取用户列表出现了错误：${error.message}`);
        });
    },
  },
};

示例2：使用封装后的post请求示例

import { login } from '@/api/index';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    submitForm() {
      const params = { username: this.username, password: this.password };
      login(params)
        .then(() => {
          this.$router.push({ name: 'Home' });
        })
        .catch(error => {
          console.error(`登录失败：${error.message}`);
        });
    },
  },
};