uni-app接口封装

最新推荐文章于 2025-10-24 09:34:44 发布

原创最新推荐文章于 2025-10-24 09:34:44 发布 · 6.9k 阅读

7 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在uni-app中进行接口请求的封装。首先在common文件夹下创建request.js，然后在各个页面上调用这些封装好的接口，实现统一的请求管理。

部署运行你感兴趣的模型镜像

1：common中创建request.js

const baseurl = 'http://kjs.demo.dopaik.cn';

const main = opts => {
	// opts.url = baseurl + opts.url;

	const regHost = /^(http|https|\\)/;
	// test() 方法用于检测一个字符串是否匹配某个模式.
	if (!regHost.test(opts.url)) {
		opts.url = baseurl + opts.url;
	}

	!opts.method && (opts.method = 'get');
	// toLocaleUpperCase() 方法用于把字符串转换为大写。
	opts.method = opts.method.toLocaleUpperCase();
	!opts.dataType && (opts.dataType = 'json');
	// return uni.request(opts);
	return request(opts);
}

const request = opts => {
	// Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
	return new Promise((resolve, reject) => {
		uni.request(opts).then(result => {
			resolve(result[1].data);
		}).catch(reject)
	});
}

export default main

2:页面上进行调用

import utils from '@/common/request.js';

//定义传进去的参数
    const opts = {
            url: '/api/commodity/query',
            data: {
                business_sign: this.business_sign
            }
        };
        //接口调用
        utils.main(opts).then(
            res => {
                this.listdata = res.data;
            },
            error => {
                console.log('失败');
            }
        );