行业资讯

vue项目如何使用axios封装request请求

发布时间：2023-04-21 15:57:20 作者：iii
来源：亿速云 阅读：156

Vue项目如何使用axios封装request请求

在现代的前端开发中，网络请求是不可或缺的一部分。Vue.js 流行的前端框架，通常需要与后端服务器进行数据交互。为了简化网络请求的处理，开发者通常会使用 axios 这个基于 Promise 的 HTTP 客户端库。本文将详细介绍如何在 Vue 项目中封装 axios，以便更好地管理网络请求。

1. 为什么需要封装 axios？

在 Vue 项目中直接使用 axios 是可行的，但随着项目的复杂度增加，直接使用 axios 可能会导致以下问题：

通过封装 axios，我们可以解决上述问题，使代码更加简洁、可维护性更高。

2. 安装 axios

首先，我们需要在项目中安装 axios。可以通过 npm 或 yarn 来安装：

npm install axios

或者

yarn add axios

3. 创建 request.js 文件

在 src 目录下创建一个 utils 文件夹，并在其中创建一个 request.js 文件。这个文件将用于封装 axios。

src/
├── utils/
│   └── request.js

4. 基本封装

在 request.js 中，我们可以对 axios 进行基本的封装。以下是一个简单的封装示例：

import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 例如：添加请求头、处理 token 等
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    const res = response.data;
    if (res.code !== 200) {
      // 处理业务逻辑错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default service;

4.1 解释

5. 使用封装的 request 方法

在项目中，我们可以通过导入 request.js 来使用封装好的 axios 实例。以下是一个简单的示例：

import request from '@/utils/request';

export function fetchUserInfo(userId) {
  return request({
    url: `/user/${userId}`,
    method: 'get',
  });
}

在 Vue 组件中，我们可以这样使用：

import { fetchUserInfo } from '@/api/user';

export default {
  data() {
    return {
      userInfo: null,
    };
  },
  async created() {
    try {
      const res = await fetchUserInfo(1);
      this.userInfo = res.data;
    } catch (error) {
      console.error('Failed to fetch user info:', error);
    }
  },
};

6. 处理错误

在实际开发中，网络请求可能会遇到各种错误，例如网络超时、服务器错误等。为了更好地处理这些错误，我们可以在 request.js 中进行统一的错误处理。

6.1 错误处理示例

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    if (res.code !== 200) {
      // 处理业务逻辑错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，跳转到登录页面
          router.push('/login');
          break;
        case 404:
          // 资源未找到
          break;
        case 500:
          // 服务器内部错误
          break;
        default:
          break;
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 其他错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

6.2 解释

7. 添加全局 loading 效果

在某些情况下，我们希望在请求发送时显示 loading 效果，请求结束后隐藏 loading。可以通过在请求拦截器和响应拦截器中添加 loading 的逻辑来实现。

7.1 添加 loading 效果示例

import { Loading } from 'element-ui';

let loadingInstance;

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 显示 loading
    loadingInstance = Loading.service({ fullscreen: true });
    return config;
  },
  (error) => {
    // 隐藏 loading
    loadingInstance.close();
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 隐藏 loading
    loadingInstance.close();
    return response;
  },
  (error) => {
    // 隐藏 loading
    loadingInstance.close();
    return Promise.reject(error);
  }
);

7.2 解释

8. 添加请求取消功能

在某些情况下，我们可能需要取消正在进行的请求。例如，当用户快速切换页面时，之前的请求可能已经不再需要。axios 提供了取消请求的功能。

8.1 请求取消示例

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 添加取消请求的功能
    config.cancelToken = new CancelToken((c) => {
      cancel = c;
    });
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 取消请求的函数
export function cancelRequest() {
  cancel && cancel();
}

8.2 解释

9. 添加请求重试功能

在某些情况下，请求可能会因为网络问题而失败。为了提高请求的成功率，我们可以添加请求重试的功能。

9.1 请求重试示例

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;
    if (error.response.status === 500 && !originalRequest._retry) {
      originalRequest._retry = true;
      // 重试请求
      return service(originalRequest);
    }
    return Promise.reject(error);
  }
);

9.2 解释

10. 总结

通过封装 axios，我们可以使 Vue 项目中的网络请求更加简洁、可维护性更高。本文介绍了如何对 axios 进行基本封装、处理错误、添加全局 loading 效果、请求取消功能以及请求重试功能。希望这些内容能够帮助你在 Vue 项目中更好地管理网络请求。

11. 完整代码示例

以下是 request.js 的完整代码示例：

import axios from 'axios';
import { Loading } from 'element-ui';
import router from '@/router';

const CancelToken = axios.CancelToken;
let cancel;
let loadingInstance;

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 显示 loading
    loadingInstance = Loading.service({ fullscreen: true });

    // 添加取消请求的功能
    config.cancelToken = new CancelToken((c) => {
      cancel = c;
    });

    // 添加请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }

    return config;
  },
  (error) => {
    // 隐藏 loading
    loadingInstance.close();
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 隐藏 loading
    loadingInstance.close();

    const res = response.data;
    if (res.code !== 200) {
      // 处理业务逻辑错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  async (error) => {
    // 隐藏 loading
    loadingInstance.close();

    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，跳转到登录页面
          router.push('/login');
          break;
        case 404:
          // 资源未找到
          break;
        case 500:
          // 服务器内部错误
          const originalRequest = error.config;
          if (!originalRequest._retry) {
            originalRequest._retry = true;
            // 重试请求
            return service(originalRequest);
          }
          break;
        default:
          break;
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 其他错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

// 取消请求的函数
export function cancelRequest() {
  cancel && cancel();
}

export default service;

12. 结语

通过本文的介绍，你应该已经掌握了如何在 Vue 项目中封装 axios 来管理网络请求。封装 axios 不仅可以提高代码的可维护性，还能使网络请求的处理更加灵活和高效。希望这些内容能够帮助你在实际项目中更好地使用 axios。

推荐阅读：
  1. vue状态共享的示例分析
  2. 在自定义事件中vue怎么判断该值是从其子组件中捕获的值

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

vue axios request

上一篇：Vue如何用extend动态创建组件

下一篇：怎么使用ant design Vue纯前端实现分页

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号