妙招！轻松掌握Vue2、3、小程序、Uniapp API请求封装

2023-10-17 09:53:22

API 请求封装：在 Vue2、Vue3、小程序和 Uniapp 中实现

优化开发效率的必备指南

前端开发中，API 请求是至关重要的任务。为了提高代码的可维护性并简化开发流程，对 API 请求进行封装是必不可少的。本文将深入探讨如何使用 Vue2、Vue3、小程序和 Uniapp 来实现 API 请求封装，从而统一管理请求接口。

Vue2 API 封装

对于 Vue2，推荐使用 axios 库进行 API 请求封装。它是一个功能强大且常用的 HTTP 库，可以轻松发送和接收请求。

首先，安装 axios：

npm install axios

然后，在 main.js 中导入 axios 并创建 axios 实例：

import axios from 'axios'

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

在组件中，使用 axios 发送请求：

import axios from 'axios'

export default {
  methods: {
    async getUser() {
      const res = await axios.get('/user')
      console.log(res.data)
    }
  }
}

Vue3 API 封装

Vue3 的 API 请求封装与 Vue2 类似，仍然可以使用 axios 库。

在 main.js 中，导入 axios 并创建实例：

import axios from 'axios'

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

export default instance

在组件中，使用 axios 发送请求：

import axios from '@/main.js'

export default {
  methods: {
    async getUser() {
      const res = await axios.get('/user')
      console.log(res.data)
    }
  }
}

小程序 API 封装

对于小程序，request 库是 API 请求封装的首选。

安装 request：

npm install request

在 app.js 中，导入 request 并创建实例：

import request from 'request'

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

在页面中，使用 request 发送请求：

import request from '@/app.js'

Page({
  async getUser() {
    const res = await request.get('/user')
    console.log(res.data)
  }
})

Uniapp API 封装

Uniapp 的 API 请求封装与小程序类似，也可以使用 request 库。

在 main.js 中，导入 request 并创建实例：

import request from 'request'

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

在页面中，使用 request 发送请求：

import request from '@/main.js'

export default {
  methods: {
    async getUser() {
      const res = await request.get('/user')
      console.log(res.data)
    }
  }
}