Vue3轻松玩转axios封装与接口配置

2022-12-06 03:57:10

拥抱 Vue 3 的魅力：轻松掌握 Axios 封装与接口配置

踏入 Vue 3 的迷人世界，让我们携手探索如何将 Axios 封装得完美无瑕，如何配置接口做到游刃有余。本文将为您提供全方位的指导，让您轻松掌握这项技术，提升您的开发效率和项目质量。

一、开启 Axios 封装之旅

1. 缘起：为何封装 Axios？

在实际开发中，我们经常需要与服务器进行数据交互，Axios 作为一款优秀的 HTTP 库，能够轻松实现这一需求。然而，随着项目需求的不断扩展，我们可能会遇到各种各样的问题，比如每次请求都需要手动添加 token、处理不同的状态码等。为了避免这些繁琐的操作，提高开发效率，Axios 封装应运而生。

2. 封装步骤：一步步构建 Axios 封装

（1）安装 Axios 库

npm install axios

（2）创建 Axios 实例

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
});

（3）请求拦截器：在请求发出前做点什么

instance.interceptors.request.use((config) => {
  // 在每个请求体里加上 token
  config.headers['Authorization'] = `Bearer ${token}`;

  return config;
});

（4）响应拦截器：在收到响应后做点什么

instance.interceptors.response.use(
  (response) => {
    // 对不同状态码做不同处理
    switch (response.status) {
      case 200:
        return response.data;
      case 401:
        // 登录状态 token 失效，跳转到登录页
        window.location.href = '/login';
        break;
      default:
        throw new Error(`请求错误，状态码：${response.status}`);
    }
  },
  (error) => {
    // 统一处理错误
    console.error('请求出错：', error);
    return Promise.reject(error);
  }
);

3. 迈向成熟：Axios 封装的进阶之道

（1）全局错误处理

instance.defaults.timeout = 10000;

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 对请求错误做统一处理
    if (error.response && error.response.status === 401) {
      // 登录状态 token 失效，跳转到登录页
      window.location.href = '/login';
    } else {
      // 其他错误情况，弹出错误提示
      Message.error('请求出错，请稍后再试');
    }
    return Promise.reject(error);
  }
);

（2）mock 数据模拟

if (process.env.NODE_ENV === 'development') {
  instance.interceptors.request.use((config) => {
    // 在开发环境下，使用 mock 数据模拟
    if (config.url === '/api/user/info') {
      return {
        data: {
          id: 1,
          name: 'John Doe',
          age: 20,
        },
      };
    }
    return config;
  });
}

二、接口配置：让请求更加灵活

1. 配置 baseURL，减少重复代码

instance.defaults.baseURL = 'http://localhost:3000';

2. 配置 headers，传递通用请求头

instance.defaults.headers.common['Content-Type'] = 'application/json';

3. 配置 timeout，避免长时间等待

instance.defaults.timeout = 10000;

4. 配置 withCredentials，允许跨域携带 cookie

instance.defaults.withCredentials = true;

三、示例代码：一试便知

// GET 请求
instance.get('/api/user/info').then((response) => {
  console.log(response.data);
});

// POST 请求
instance.post('/api/user/login', {
  username: 'admin',
  password: '123456',
}).then((response) => {
  console.log(response.data);
});

// PUT 请求
instance.put('/api/user/update', {
  id: 1,
  name: 'John Doe',
  age: 20,
}).then((response) => {
  console.log(response.data);
});

// DELETE 请求
instance.delete('/api/user/delete', {
  params: {
    id: 1,
  },
}).then((response) => {
  console.log(response.data);
});