vue项目 axios封装

原创

mob649e81673fa5 2024-01-10 11:04:24 ©著作权

文章标签 ios 封装拦截器 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e81673fa5的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue项目axios封装

介绍

在Vue项目中，我们通常会使用axios库来进行网络请求。为了提高开发效率和代码复用性，我们可以将axios封装成一个可复用的模块。本文将教会你如何实现Vue项目中的axios封装。

流程概览

下面是实现Vue项目axios封装的流程概览，我们将通过以下几个步骤来完成：

安装axios库
创建请求拦截器和响应拦截器
创建封装的axios实例
封装常用的请求方法
在Vue项目中使用封装后的axios

接下来，我们将逐步介绍每个步骤需要做什么，以及相应的代码示例。

步骤详解

1. 安装axios库

首先，我们需要在Vue项目中安装axios库。在终端中运行以下命令：

npm install axios

2. 创建请求拦截器和响应拦截器

创建一个新的文件，命名为http.js，并在该文件中编写请求拦截器和响应拦截器的代码。请求拦截器用于在发送请求之前进行一些操作，比如添加请求头信息。响应拦截器用于对响应进行一些处理，比如统一处理错误信息。

以下是http.js文件中的代码示例：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: ' // 请求的基础URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前可以对config进行一些修改
    // 比如添加请求头信息
    config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  error => {
    // 请求错误时的处理
    console.error('请求拦截器发生错误', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据进行处理
    return response.data;
  },
  error => {
    // 响应错误时的处理
    console.error('响应拦截器发生错误', error);
    return Promise.reject(error);
  }
);

export default instance;

3. 创建封装的axios实例

接下来，我们需要创建一个封装后的axios实例，以便在项目中使用。创建一个新的文件，命名为api.js，并在该文件中编写相关代码。

以下是api.js文件中的代码示例：

import http from './http';

export const getUser = params => {
  return http.get('/user', { params });
};

export const postUser = data => {
  return http.post('/user', data);
};

// 更多的封装请求方法...

4. 封装常用的请求方法

在api.js文件中，我们可以根据项目需求封装常用的请求方法。例如，getUser和postUser方法是对GET和POST请求的封装。

5. 在Vue项目中使用封装后的axios

最后，我们可以在Vue项目的组件中使用封装后的axios进行网络请求。

以下是一个使用封装后的axios进行网络请求的示例：

import { getUser } from './api';

export default {
  mounted() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      try {
        const response = await getUser({ id: 1 });
        console.log(response);
        // 处理返回的用户数据
      } catch (error) {
        console.error(error);
        // 处理错误
      }
    },
  },
};