Uni-app小程序+Vue2 Or Vue3 封装网络请求方案+思路

封装网络请求，可以提高开发效率，降低&&减少代码，当一个接口，库不在使用，更加方便后期的更改和维护，可以减少不必要的麻烦。并且更加方便使用。开始配置↓

首先创建utils文件夹

配置封装代码 ，接收请求的基地址，传递的数据接口api，请求方式，参数等...

// 请求的基地址
const Baseaddress = "https://aip.baidubce.com/"
// 网络请求 等同于 axios请求和拦截器
const http = function request(options) {
    // 封装的实际代码
    const list = uni
        .request({
            url: Baseaddress + options.url,
            header: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json',
            },
            method: options.method, // 修改为 method
            data: options.data,
        })
        .then((data) => {
            // data 为一个数组，数组第一项为错误信息，第二项为返回数据
            console.log(data);
            return data.data;
        });
    return list;
}

//抛出request 在此组件可以简写
module.exports = {
    http
}

创建api文件夹 写api接口

配置请求的实际api，请求方式，传递的数据，最后返回给调用这个函数的方法。

// 导入请求函数
const { http } = require('../utils/index')

// 配置请求地址 -方法
export const frontpage = function (data) {
    return http({
        // 定义接口
        url: "/rest/2.0/image-classify/v2/advanced",
        // 请求方式
        method: "post",
        // 传递数据
        data,
        success: (res) => {
            return res//返回结果
        }
    })
}

使用时按需导入

import { frontpage } from "../../api/index";
async add() {
      let res = await frontpage();
      console.log(res.data);
},

网络请求封装完成