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

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

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

首先创建utils文件夹

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

// 请求的基地址
const Baseaddress = "https://meituan.thexxdd.cn/api"
// 网络请求 等同于 axios请求和拦截器
const http = function request(options) {
    //封装的实际代码
    const list = uni
        .request({
            url: Baseaddress + options.url,
            header: {
                'custom-header': 'hello' //自定义请求头信息 在这里配置携带token
            },
            methods: options.methods,
            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: "/frontpage",
        // 请求方式
        methods: "GET",
        // 传递数据
        data,
        success: (res) => {
            return res//返回结果
        }
    })
}

使用时按需导入

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

网络请求封装完成