封装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 972
一、前言 在开发uni-app项目的时候，难免要进行网络请求，今天我们通过官方uni.request()进行发送网络请求。 在实际的项目开发中，接口会随着需求而增多，如果不对网络请求进行封装的话，会面临以下的问题： 网络请求代码分布在各个页面，代码混乱不方便管理 每次网络请求都需要设置请求头信息，冗余代码过多 二、实现思路 在utils目录下新建request.js文件 （utils目录不存在，请自行在项目根目录下创建） 在api目录下新建业务模块，例如用..
uniapp封装ajax请求
qq_55272229的博客
08-26 2588
这样就把uniapp的回调ajax封装为了resolve,这里还类似封装了axios的拦截器。
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文件（文件名可自定义）用于处理拦截器，接口根地址，替代配置等，
uni-app 自己封装的utils.js
05-17
uni-app 自己封装的utils.js 常用工具类（封装的ajax，上传，查看文档，富文本解析）
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}）// 请求拦截器 拦截器触发。
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...
uniapp中简单封装ajax
m0_55333789的博客
04-13 597
uniapp简单封装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 可以让代码更加简洁、易维护和复用性强。以下是基于提供的引用内容以及最佳实践的一种封装方案。 #### 1. 基础封装 基础封装可以通过创建一个通用函数来处理所有的 HTTP 请求操作。以下是一个简单的封装示例： ```javascript // request.js 文件 const ajax = (url, method, data) => { // 显示 loading 提示框 uni.showLoading({ title: '加载中', }); return new Promise((resolve, reject) => { uni.request({ url, data, method, header: { 'content-type': 'application/json' // 设置默认 Content-Type }, success(res) { // 隐藏 loading 提示框 uni.hideLoading(); resolve(res.data); // 返回数据给调用方 }, fail(err) { // 隐藏 loading 提示框 uni.hideLoading(); reject(err); } }); }); }; export default ajax; ``` 此部分实现了基本的功能，包括显示/隐藏加载提示框、支持多种 HTTP 方法（GET、POST 等），并返回统一的结果结构[^1]。 --- #### 2. 进阶封装：按方法分类 为了更方便地使用不同的 HTTP 方法，可以进一步扩展封装，分别定义 `get`、`post`、`put` 和 `delete` 函数。这种方式能够减少重复代码量，并提高开发效率。 ```javascript // enhancedRequest.js 文件 import ajax from './request'; const wrapRequest = ({ url, method, data }) => { return ajax(url, method.toUpperCase(), data); }; export const get = (params) => wrapRequest({ ...params, method: 'GET' }); export const post = (params) => wrapRequest({ ...params, method: 'POST' }); export const put = (params) => wrapRequest({ ...params, method: 'PUT' }); export const del = (params) => wrapRequest({ ...params, method: 'DELETE' }); ``` 这种设计模式允许开发者直接调用特定的 HTTP 方法而无需手动指定参数中的 `method` 字段[^3]。 --- #### 3. 添加拦截器功能 如果项目中有复杂的业务场景，比如需要加入全局错误捕获机制或者自动刷新 token 的能力，则可以在封装的基础上增加 **请求拦截器** 和 **响应拦截器** 功能。 下面展示了一个带有无感刷新令牌功能的例子： ```javascript // advancedRequest.js 文件 let refreshTokenPending = false; const interceptors = { request(config) { config.header.Authorization = uni.getStorageSync('token'); // 自动附加 Token 到 Header 中 return config; }, response(response) { if (response.statusCode === 401 || response.errMsg.includes('invalid_token')) { // 如果检测到 Token 失效，则尝试刷新它 handleTokenRefresh().then(() => { return retryOriginalRequest(response.config); // 使用新的 Token 重试原请求 }).catch(error => { throw error; }); } return response; } }; function handleTokenRefresh() { if (!refreshTokenPending) { refreshTokenPending = true; return new Promise((resolve, reject) => { uni.request({ url: '/auth/token/refresh', // 替换为实际接口路径 method: 'POST', data: { refresh_token: uni.getStorageSync('refresh_token') }, success(result) { if (result.statusCode === 200 && result.data.success) { uni.setStorageSync('token', result.data.token); resolve(); } else { reject(new Error('Failed to refresh token')); } }, complete() { refreshTokenPending = false; } }); }); } return new Promise(resolve => setTimeout(resolve, 10)); } function retryOriginalRequest(originalConfig) { delete originalConfig['header']['Authorization']; // 清除旧 Token return ajax(originalConfig.url, originalConfig.method, originalConfig.data).then(data => data); } ``` 上述代码片段展示了如何利用拦截器解决常见问题——当用户的访问权限因 Token 超时失效时，程序会自动触发一次 Token 更新流程后再继续执行原始请求[^4]。 --- #### 4. 实际应用案例 假设我们需要在一个页面组件里获取远程服务器上的朋友推荐列表，那么可以直接这样写： ```html <template> <view>{{ friendsList }}</view> </template> <script> import { get } from '@/utils/enhancedRequest'; // 导入增强版请求工具 export default { data() { return { friendsList: [] }; }, onLoad() { this.fetchData(); }, methods: { async fetchData() { try { const res = await get('/api/task/recommendFriends'); this.friendsList = res.result; // 假设服务端返回的数据字段名为 result } catch (error) { console.error('Error fetching friend list:', error.message); } } } }; </script> ``` 这里我们引入了之前提到过的 `enhancedRequest.js` 模块里的 `get()` 方法完成异步通信过程[^2]。 --- ### 总结 以上介绍了三种不同层次的 UniApp AJAX 请求封装策略：从最简单的一般用途版本逐步过渡至具备高级特性的解决方案。每种形式都有其适用范围，具体选择取决于项目的复杂度和个人偏好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值