Vue封装Axios：告别单调请求，拥抱优雅编程

前端

2023-11-24 19:03:55

升级前端开发：告别单调请求，拥抱优雅编程

简介

在前端开发中，HTTP请求是不可或缺的，它架起了前端与后端沟通的桥梁，使我们能够交换数据并构建交互式应用程序。Axios是一个广受欢迎的HTTP请求库，以其简洁易用的API而著称。

然而，随着项目规模的扩大，API数量的激增，使用Axios管理请求变得越来越繁琐。频繁修改接口参数需要逐个查找并编辑代码，效率低下且容易出错。

优雅编程：二次封装Axios

为了解决上述挑战，我们可以对Axios进行二次封装，将接口请求集中管理起来。这样一来，修改接口时只需在封装文件中进行操作即可，大大提高开发效率和代码可维护性。

步骤详解

1. 安装Axios

首先，通过以下命令安装Axios库：

npm install axios

2. 创建Axios实例

接着，创建Axios实例，负责发送HTTP请求：

import axios from 'axios'

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

设置基准URL和超时时间等选项。

3. 封装Axios方法

封装常用的Axios方法，组成一个独立模块，例如：

import axios from 'axios'

export function get(url, params) {
  return axios.get(url, { params })
}

export function post(url, data) {
  return axios.post(url, data)
}

export function put(url, data) {
  return axios.put(url, data)
}

export function del(url) {
  return axios.delete(url)
}

封装了GET、POST、PUT和DELETE等请求方法。

4. 使用封装方法

调用封装好的方法发送HTTP请求，例如发送GET请求：

import { get } from './api'

get('/api/users').then(res => {
  console.log(res.data)
})

5. 添加拦截器

拦截器允许我们在请求和响应过程中进行预处理或后处理，添加公共请求头、处理错误响应等：

instance.interceptors.request.use(config => {
  // 在请求发送前处理
  return config
}, error => {
  // 处理请求发送失败
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  // 处理响应数据
  return response
}, error => {
  // 处理响应错误
  return Promise.reject(error)
})