封装uni ajax

最新推荐文章于 2024-06-09 22:07:14 发布
原创 最新推荐文章于 2024-06-09 22:07:14 发布 · 796 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni #微信小程序 

基于uni微信小程序的封装
一种是函数，一种是Promise
注意：当needToken为true的时候，需要提前登陆，且需要在全局定义siteBaseUrl地址。
/*
	hanker
	param: 
		token: 默认取本地的hankerToken
		loading :默认值是true
*/

function post(url,data,success,error,needToken){
    var _self = this, 
	    // 参数
        url = url,
        data = data|| {}, 
        loading = data.loading === undefined ? true : data.loading,
		method="POST",
		header = {'content-type' : "application/json"};
		data.token = uni.getStorageSync('hankerToken')||'';
        
    //拼接完整请求地址
    var requestUrl = this.siteBaseUrl + url;

    if(needToken && !data.token){ // 需要token且data中没有token;
		uni.showModal({
		    showCancel:false,
		    content:"需要登录"
		});
		return;
    }
    var timestamp = Date.parse(new Date());//时间戳
	// 添加时间戳
    data["timestamp"] = timestamp;
    // #ifdef MP-WEIXIN
    data["device"] = "wxapp";
    data["ver"] = "1.0.0";
    // #endif
    // #ifdef APP-PLUS || H5
    data["device"] = "iosapp";
    data["ver"] = "1.0.0";
    // #endif
    
    //请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
	// method = "GET";
	// header = {'content-type' : "application/json"};

    //用户交互:加载圈
    if (loading) {
        uni.showLoading({title:'加载中...'});
    }
    
    console.log("网络请求start");
    //网络请求
    uni.request({
        url: requestUrl,
        method: method,
        header: header,
        data: data,
        success: res => {
            console.log("网络请求success:" + JSON.stringify(res));
            if (res.code && res.code != 200) {//api错误
                uni.showModal({
                    content:"" + res.msg
                });
                return;
            }
     
            typeof success == "function" && success(res.data);
        },
        fail: (e) => {
            console.log("网络请求fail:" + JSON.stringify(e));
            uni.showModal({
                content:"" + e.errMsg
            });
            typeof error == "function" && error(e.data);
        },
        complete: () => {
            console.log("网络请求complete");
            if (loading) {
                uni.hideLoading();
            }
            return;
        }
    });
}

function get(url,data,success,error,needToken){
    var _self = this, 
	    // 参数
        url = url,
        data = data|| {}, 
        loading = data.loading === undefined ? true : data.loading,
		method = "GET",
		header = {'content-type' : "application/json"};
		data.token = uni.getStorageSync('hankerToken')||'';
        
    //拼接完整请求地址
    var requestUrl = this.siteBaseUrl + url;

    if(needToken && !data.token){ // 需要token且data中没有token;
		uni.showModal({
		    showCancel:false,
		    content:"需要登录"
		});
		return;
    }
    var timestamp = Date.parse(new Date());//时间戳
	// 添加时间戳
    data["timestamp"] = timestamp;
    // #ifdef MP-WEIXIN
    data["device"] = "wxapp";
    data["ver"] = "1.0.0";
    // #endif
    // #ifdef APP-PLUS || H5
    data["device"] = "iosapp";
    data["ver"] = "1.0.0";
    // #endif
    
    //请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
    //用户交互:加载圈
    if (loading) {
        uni.showLoading({title:'加载中...'});
    }
    
    console.log("网络请求start");
    //网络请求
    uni.request({
        url: requestUrl,
        method: method,
        header: header,
        data: data,
        success: res => {
            console.log("网络请求success:" + JSON.stringify(res));
            if (res.code && res.code != 200) {//api错误
                uni.showModal({
                    content:"" + res.msg
                });
                return;
            }
     
            typeof success == "function" && success(res.data);
        },
        fail: (e) => {
            console.log("网络请求fail:" + JSON.stringify(e));
            uni.showModal({
                content:"" + e.errMsg
            });
            typeof error == "function" && error(e.data);
        },
        complete: () => {
            console.log("网络请求complete");
            if (loading) {
                uni.hideLoading();
            }
            return;
        }
    });
}


/*
	此ajax采用Promise写法
*/

function postPro(url,data,needToken){
    var _self = this, 
	    // 参数
        url = url,
        data = data|| {}, 
        loading = data.loading === undefined ? true : data.loading,
		method="POST",
		header = {'content-type' : "application/json"};
		data.token = uni.getStorageSync('hankerToken')||'';
        
    //拼接完整请求地址
    var requestUrl = this.siteBaseUrl + url;

    if(needToken && !data.token){ // 需要token且data中没有token;
		uni.showModal({
		    showCancel:false,
		    content:"需要登录"
		});
		return;
    }
    var timestamp = Date.parse(new Date());//时间戳
	// 添加时间戳
    data["timestamp"] = timestamp;
    // #ifdef MP-WEIXIN
    data["device"] = "wxapp";
    data["ver"] = "1.0.0";
    // #endif
    // #ifdef APP-PLUS || H5
    data["device"] = "iosapp";
    data["ver"] = "1.0.0";
    // #endif
    
    //请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
	// method = "GET";
	// header = {'content-type' : "application/json"};

    //用户交互:加载圈
    if (loading) {
        uni.showLoading({title:'加载中...'});
    }
    
    console.log("网络请求start");
	return new Promise((resolve,reject)=>{
		uni.request({
		    url: requestUrl,
		    method: method,
		    header: header,
		    data: data,
		    success: res => {
		        console.log("网络请求success:" + JSON.stringify(res));
		        // if (res.code && res.code != 200) {//api错误
		        //     uni.showModal({
		        //         content:"" + res.msg
		        //     });
		        //     return;
		        // }
		 
		        resolve(res.data);
		    },
		    fail: (e) => {
		        console.log("网络请求fail:" + JSON.stringify(e));
		        uni.showModal({
		            content:"" + e.errMsg
		        });
		        typeof error == "function" && error(e.data);
				reject(e.data);
		    },
		    complete: () => {
		        console.log("网络请求complete");
		        if (loading) {
		            uni.hideLoading();
		        }
		        return;
		    }
		});
	});
    //网络请求
 
}

function getPro(url,data,needToken){
    var _self = this, 
	    // 参数
        url = url,
        data = data|| {}, 
        loading = data.loading === undefined ? true : data.loading,
		method = "GET",
		header = {'content-type' : "application/json"};
		data.token = uni.getStorageSync('hankerToken')||'';
        
    //拼接完整请求地址
    var requestUrl = this.siteBaseUrl + url;

    if(needToken && !data.token){ // 需要token且data中没有token;
		uni.showModal({
		    showCancel:false,
		    content:"需要登录"
		});
		return;
    }
    var timestamp = Date.parse(new Date());//时间戳
	// 添加时间戳
    data["timestamp"] = timestamp;
    // #ifdef MP-WEIXIN
    data["device"] = "wxapp";
    data["ver"] = "1.0.0";
    // #endif
    // #ifdef APP-PLUS || H5
    data["device"] = "iosapp";
    data["ver"] = "1.0.0";
    // #endif
    
    //请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
    //用户交互:加载圈
    if (loading) {
        uni.showLoading({title:'加载中...'});
    }
    
    console.log("网络请求start");
    //网络请求
   return new Promise((resolve,reject)=>{
   	uni.request({
   	    url: requestUrl,
   	    method: method,
   	    header: header,
   	    data: data,
   	    success: res => {
   	        console.log("网络请求success:" + JSON.stringify(res));
   	 //        if (res.code && res.code != 200) {//api错误
   	 //            uni.showModal({
   	 //                content:"" + res.msg
   	 //            });
   	 //            return;
   	 //        }
   	 
   	        resolve(res.data);
   	    },
   	    fail: (e) => {
   	        console.log("网络请求fail:" + JSON.stringify(e));
   	        uni.showModal({
   	            content:"" + e.errMsg
   	        });
   	        typeof error == "function" && error(e.data);
   			reject(e.data);
   	    },
   	    complete: () => {
   	        console.log("网络请求complete");
   	        if (loading) {
   	            uni.hideLoading();
   	        }
   	        return;
   	    }
   	});
   });
}

export {
	post,
	get,
	postPro,
	getPro
}
封装uniapp开发相关ajax请求
swagLi的博客
05-06 2845
一、使用uni.request方法和promise进行封装，代码如下： let Promises = Promise import config from './config' //这是我存放接口api的文件 const host = config.host; //这是获取域名 Promises.prototype.finally = function(callback) { let P...
封装uni.request网络请求
qzznds的博客
01-19 971
一、前言 在开发uni-app项目的时候，难免要进行网络请求，今天我们通过官方uni.request()进行发送网络请求。 在实际的项目开发中，接口会随着需求而增多，如果不对网络请求进行封装的话，会面临以下的问题： 网络请求代码分布在各个页面，代码混乱不方便管理 每次网络请求都需要设置请求头信息，冗余代码过多 二、实现思路 在utils目录下新建request.js文件 （utils目录不存在，请自行在项目根目录下创建） 在api目录下新建业务模块，例如用..
uni-ajax：uni-app的轻量级HTTP客户端
02-04
:sparkles:特性 支持Promise API 支持Typescript开发 拦截请求和响应 自定义配置请求实例 多种方法方法请求 支持RequestTask操作 :french_fries:文件 :green_salad:安装 插件市场 在插件市场右上角选择使用HBuilder X 导入插件下载插件ZIP 。 NPM # 如果您的项目是HBuilder X创建的，根目录又没有package.json文件的话，请先执行如下命令： # npm init -y # 安装 npm install uni-ajax # 更新 npm update uni-ajax :croissant:实例 新建ajax.js文件（文件名可自定义）用于处理拦截器，接口根地址，替代配置等，
uniapp封装ajax请求
qq_55272229的博客
08-26 2588
这样就把uniapp的回调ajax封装为了resolve,这里还类似封装了axios的拦截器。
uni封装ajax,uni-app封装ajax请求方法
weixin_34030345的博客
08-05 671
位置项目根目录index.js定义了两种请求get和postimport baseconfig from "./common/baseconfig.js"const httpClient = {request:function(method,url,data){var headers={"Content-Type": "application/x-www-form-urlencoded",// "...
uni-app ajax请求进行封装(待改进)
2301_77104436的博客
04-21 551
http.请求方式（'请求数据',{ 请求传参数据：例 a:3}）// 请求拦截器 拦截器触发。
uniapp中简单封装ajax
m0_55333789的博客
04-13 597
uniapp简单封装ajax
3-11 定义全局路径和封装Ajax（移动端） - EMOS小程序1
08-04
在本文中，我们将深入探讨如何在EMOS小程序1中定义全局路径和封装Ajax请求，以提高代码的可维护性和效率。 首先，我们要解决的是全局路径的定义。在大型项目中，URL路径的管理变得尤为重要，因为它涉及到各个接口的...
uniapp前端ajax教学,uni-app封装ajax请求方法
weixin_33561910的博客
08-06 1423
位置项目根目录index.js定义了两种请求get和postimport baseconfig from "./common/baseconfig.js"const httpClient = {request:function(method,url,data){var headers={"Content-Type": "application/x-www-form-urlencoded","Aut...
uni-app 自己封装的utils.js
05-17
uni-app 自己封装的utils.js 常用工具类（封装的ajax，上传，查看文档，富文本解析）
uni封装ajax,uni-app方法封装
weixin_32048835的博客
08-05 273
请求数据方法封装const ApiUrl = '';export{ApiUrl}import {ApiUrl} from './env.js';const ajax = (opt) => {opt = opt || {};opt.url = opt.url || '';opt.data = opt.data || null;opt.method = opt.method || 'GET';o...
uni封装ajax,自己写一个uni-app的ajax接口
weixin_29216049的博客
08-05 651
自己项目需要，封装了一个ajax接口，对接于Graphql接口，可以自己手动改一部分import config from "./config.js"let ajax = {// 默认配置config: {baseURL: 'http://127.0.0.1:9904',header: {'Content-Type': 'application/json;charset=UTF-8',"Access...
uniapp中封装请求
haodanzj的博客
08-22 4233
封装uniapp中的请求
uniapp封装ajax
m0_65789413的博客
08-06 382
/首先创建一个存放ajax的文件夹,里面创建ajax.js。//引入封装好的ajax文件。// 这个文件封装数据请求。//设置需要请求的变量。// node按需导出。// 服务器基础地址。// 通用的请求函数。// ES6按需导出。//在需要调用的时候。
uniapp封装AJAX请求
Misaka__Mikoto__的博客
09-27 1767
uniapp封装AJAX请求
uni-app小程序中request uni-ajax插件的使用
m0_69247348的博客
06-09 625
http请求
uni.app小程序的ajax封装详细讲解
09-02 969
【代码】uni.app小程序的ajax封装详细讲解。
uniapp 请求封装ajax
最新发布
04-03
### UniApp 中封装 Ajax 请求的实现方式 在 UniApp 开发中，网络请求是一个常见的需求。通过封装 `wx.request` 或者类似的 API 可以让代码更加简洁、易维护和复用性强。以下是基于提供的引用内容以及最佳实践的一种...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值