使用Axios和Vue.js封装API请求

在Vue.js开发中，我们经常会使用到Axios作为HTTP客户端来发送请求，以与后端API进行通信。封装API请求可以使代码结构更清晰，同时也有助于统一管理请求和处理错误。

安装Axios

首先，我们需要安装Axios。在项目根目录下打开终端，输入以下命令：

npm install axios

封装API请求

在Vue.js应用中，我们可以创建一个单独的文件来封装API请求。我们可以将这个文件称为api.js。

在api.js文件中，我们首先需要导入Axios：

import axios from 'axios';

接下来，我们可以创建一个axios实例，以配置基本的请求参数，如请求的URL、请求超时时间等：

const instance = axios.create({
  baseURL: 'http://localhost:3000/api', // 请求URL的前缀
  timeout: 5000 // 请求超时时间
});

在Vue.js中，我们通常将API请求封装成一个个函数，以便在组件中使用。以下是一个简单的示例：

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

// 更新用户信息
export const updateUserInfo = (data) => {
  return instance.post('/user/update', data);
};

在上面的示例中，我们分别封装了两个函数来获取用户信息和更新用户信息。这些函数会返回一个Promise对象，我们可以在组件中使用then和catch方法来处理请求的结果。

在组件中使用

在Vue.js组件中，我们可以通过导入封装好的API函数，来调用后端API。

首先，在组件的<script>标签中导入我们的API函数：

import { getUserInfo, updateUserInfo } from '@/api';

接下来，我们可以在组件的methods中使用这些函数，处理API请求的结果：

methods: {
  getUser() {
    getUserInfo()
      .then(response => {
        // 处理请求成功的结果
        console.log(response.data);
      })
      .catch(error => {
        // 处理请求失败的错误
        console.error(error);
      });
  },
  
  updateUser() {
    const data = { name: 'John' };

    updateUserInfo(data)
      .then(response => {
        // 处理请求成功的结果
        console.log(response.data);
      })
      .catch(error => {
        // 处理请求失败的错误
        console.error(error);
      });
  }
}

在上面的示例中，我们分别在getUser和updateUser方法中调用了getUserInfo和updateUserInfo函数，用来获取和更新用户信息。

错误处理

在封装API请求时，我们也应该考虑错误处理的情况。在api.js文件中，我们可以使用axios的拦截器来处理错误。

首先，在api.js中导入Vue.js的router实例：

import router from '@/router';

接下来，在创建axios实例时，我们可以使用interceptors属性来添加拦截器，用来统一处理错误：

instance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 处理请求失败的错误
    if (error.response) {
      if (error.response.status === 401) {
        // 跳转到登录页面
        router.push('/login');
      } else {
        // 显示错误信息
        console.error(error.response.data.message);
      }
    }
    
    return Promise.reject(error);
  }
);

在上面的示例中，我们为response添加了一个拦截器，用来处理请求返回的结果。在请求失败时，我们根据不同的错误状态码，进行对应的处理。例如，如果返回状态码为401，则表示用户未授权，我们可以将用户重定向到登录页面。

总结

封装API请求可以使Vue.js应用的代码结构更清晰，同时也有助于统一管理请求和处理错误。通过使用Axios和Vue.js一起封装API请求，我们可以更好地与后端API进行通信，并提供更好的用户体验。以上是一个简单的示例，您可以根据您的具体需求进行更详细的封装。