vue axios封装及API统一管理的方法

下面介绍一下“Vue axios封装及API统一管理的方法”的完整攻略。

一、为什么需要封装及统一管理API

在Vue项目中使用axios发送HTTP请求是非常常见的，而每次发送请求时，都需要编写一大堆繁琐的代码，例如设置请求头、处理错误、在请求完成后进行数据处理等等。

同时，在一个大型项目中，可能会存在多个人协作开发，每个人都有可能编写自己的API请求函数，这样会导致代码冗余，无法统一管理。

因此，我们需要将axios进行封装，并统一管理API请求函数，方便团队开发以及后期维护。

二、如何封装及统一管理API

下面介绍一下封装及统一管理API的具体步骤。

1. 创建API目录

在Vue项目的src目录下创建一个api目录，用于存放API请求函数。

2. 创建base.js文件

在api目录下创建一个base.js文件，用于初始化axios实例。

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://localhost:3000/api', // API请求的默认前缀
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
});

// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做某事，比如加一个loading
    return config;
  },
  error => {
    // 请求错误时做些事
    return Promise.reject(error);
  },
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 在响应之后做某事，比如关闭loading
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  },
);

export default instance;

这里我们初始化了一个axios实例，并设置了默认的请求地址、超时时间和请求头。

3. 创建API请求文件

在api目录下创建一个文件，例如user.js，用于存放用户相关的API请求函数。

import instance from './base';

// 用户登录
export const login = params => {
  return instance.post('/user/login', params);
};

// 获取用户信息
export const getUserInfo = () => {
  return instance.get('/user/info');
};

// 修改用户信息
export const updateUser = params => {
  return instance.post('/user/update', params);
};

这里我们以用户相关的API为例，编写了登录、获取用户信息和修改用户信息三个API请求函数。

4. 统一管理API请求函数

为了方便管理，我们可以将所有API请求函数存放在一个文件中，在这个文件中统一导出。

在api目录下创建一个index.js文件，用于导出我们所有API请求函数。

import * as user from './user';

export default {
  user,
};

这样，在我们的组件中，就可以通过引入api/index.js，然后调用api.user.login来发送请求，而无需再次编写大量的axios请求代码了。

三、示例说明

示例一：登录页面

在登录页面中，我们需要编写一个方法，来发送登录请求，获取到返回的token，并将其存储到localStorage中。

<template>
  <div>
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
import api from '@/api';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        const res = await api.user.login({ username: this.username, password: this.password });
        localStorage.setItem('token', res.token);
        alert('登录成功！');
      } catch (error) {
        alert('登录失败！');
      }
    },
  },
};
</script>

在这个示例中，我们引入了api/user，并通过api.user.login方法来发送登录请求，通过async/await语法来处理异步请求结果。

示例二：用户信息页面

在用户信息页面中，我们需要编写一个方法，来获取用户信息，并将其显示在页面上。

<template>
  <div>
    <div>用户名：{{ userInfo.username }}</div>
    <div>手机号：{{ userInfo.phone }}</div>
    <div>邮箱：{{ userInfo.email }}</div>
    <button @click="updateUser">修改信息</button>
  </div>
</template>

<script>
import api from '@/api';

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await api.user.getUserInfo();
        this.userInfo = res.data;
      } catch (error) {
        alert('获取用户信息失败！');
      }
    },
    async updateUser() {
      try {
        // 假设我们的表单中有username、phone、email三个字段
        const params = {
          username: this.userInfo.username,
          phone: this.userInfo.phone,
          email: this.userInfo.email,
        };
        await api.user.updateUser(params);
        alert('修改用户信息成功！');
      } catch (error) {
        alert('修改用户信息失败！');
      }
    },
  },
};
</script>

在这个示例中，我们通过api.user.getUserInfo方法来获取用户信息，并通过async/await语法来处理异步请求结果。

同时，在修改用户信息时，我们将当前用户信息展示在表单中，并通过api.user.updateUser方法来发送请求。