实战干货 | 掌握Vue项目接口请求封装，全面提升开发效率

2023-09-14 00:06:01

封装Vue项目中的HTTP请求

在Vue项目中，与服务器进行数据交互是至关重要的。为了简化和规范化此过程，封装一个请求模块可以大大提高开发效率和代码质量。本文将探讨使用Axios和原生fetch API封装Vue项目中HTTP请求的两种方法。

使用Axios封装请求

Axios是一个基于Promise的HTTP客户端库，因其易用性、功能强大和广泛采用而广受欢迎。

安装和创建实例

第一步是安装Axios：

npm install axios

然后，创建一个Axios实例，以定义默认配置，例如基准URL、超时和请求头：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

发送请求

接下来，您可以使用instance对象发送HTTP请求。例如，发送GET请求：

instance.get('/api/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

使用fetch封装请求

fetch是浏览器原生提供的用于发送HTTP请求的API。虽然语法类似于Axios，但需要手动处理请求参数、请求头和错误处理。

发送请求

要使用fetch发送请求，可以使用以下语法：

fetch('http://localhost:3000/api/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
}).then((response) => {
  return response.json();
}).then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});

封装请求模块

为了简化在Vue项目中使用，我们可以将Axios或fetch封装成一个请求模块。

创建请求模块

例如，创建一个名为request.js的文件，其中包含Axios实例：

// request.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

在项目中使用请求模块

在主文件中，您可以导入request模块并使用它发送请求：

// main.js
import request from './request.js';

request.get('/api/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

优势

封装请求模块提供以下优势：