Axios 36计，拿下所有后端数据！

前端

2023-05-27 05:02:43

使用 Vue3、Typescript 和 Axios 构建强大的封装

前言

各位前端开发人员，是时候提升你们的技能了！今天，我们将探索如何使用 Vue3、Typescript 和 Axios 构建一个二次封装，让你们的代码更上一层楼。

什么是 Axios？

Axios 是一个广受欢迎的 HTTP 库，它简化了与后端的通信。它的优点在于简单易用，支持各种浏览器和 Node.js 环境。

为何需要二次封装？

虽然 Axios 非常强大，但它返回的数据格式并不总是理想。为了定制数据并满足我们的特定需求，我们可以对其进行二次封装。

分步指南

第一步：安装 Axios

npm install axios

第二步：创建 Axios 实例

import axios from 'axios';

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

第三步：二次封装 Axios

const api = {
  get: (url: string, params?: any) => {
    return instance.get(url, { params });
  },
  post: (url: string, data?: any) => {
    return instance.post(url, data);
  },
  put: (url: string, data?: any) => {
    return instance.put(url, data);
  },
  delete: (url: string, params?: any) => {
    return instance.delete(url, { params });
  }
};

第四步：使用二次封装的 Axios

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

api.post('/users', { name: 'John Doe' }).then((res) => {
  console.log(res.data);
});

api.put('/users/1', { name: 'Jane Doe' }).then((res) => {
  console.log(res.data);
});

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