使前后交互更加方便---封装uni.request

我不是女神ヾ 2022-12-03 02:29 162阅读 0赞

先声明服务器端的地址：

var URL = { 
    	//#ifndef H5
    	base:'<scheme>://<host>:<port>',
    	//#endif
    	//#ifdef H5
    	base:'',
    	//#endif
    }

**题外话**==>上述的地址定义涉及到H5端请求出现跨域的问题，解决方法如下：在manifest.json中添加

"h5" : { 
            "devServer" : { 
                "disableHostCheck" : true,
                "proxy" : { 
                    "" : { 
                        "target" : "<scheme>://<host>:<port>",//服务器地址
                        "changeOrigin" : true,
                        "secure" : false
                    }
                }
            }
        }

言归正传

function result(options){ 
    	return new Promise((resolve,reject)=>{ 
    		uni.request({ 
    			...options,
    			success:(res) =>{ 
    				if (res.statusCode == 200) { 
    				    resolve(res.data)
    				} else if (res.statusCode == 405) { 
    				    uni.showToast({ 
    				        icon: 'none',
    				        title: '请求方法错误',
    				        duration: 1500
    				    });   
    				} else if (res.statusCode == 401) { 
    				    uni.showToast({ 
    				        icon: 'none',
    				        title: '用户没有访问权限，需要进行身份认证',
    				        duration: 1500
    				    });
    				  	//可调用自己写的退出登录的方法
    				  	/** 代码块---- */
    				} else { 
    				    uni.showToast({ 
    				        icon: 'none',
    				        title: '请求错误:' + res.statusCode,
    				        duration: 1500
    				    });
    				}
    			},
    			fail: (err) => { 
    			    uni.showToast({ 
    			        icon: 'none',
    			        title: err.errMsg,
    			        duration: 2000
    			    });
    			    reject(err)
    			}   	    
    		})
    	})	
    }
    	
    function get(url,data={ },options={ }){ 
    	options.url=URL.base  + url
    	options.data=data
    	options.method="GET"
    	return this.result(options)
    }
    
    //请求地址，参数，类型，请求参数集 
    function post(url,data={ },type,options={ }){ 
    	if(type && type==1){ 
    		type='application/json';
    	}else{ 
    		type='application/x-www-form-urlencoded';
    	}
    	options.url=URL.base  + url
    	options.data=data
    	options.method="POST"
    	options.header={ 'content-type':type}
    	return this.result(options)
    }
    
    
    export default{ 
    	result，
    	get,
    	post
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关二十分钟封装，一个App前后台Http交互的实现

react-native-easy-app是一款为React Native App快速开发提供基础服务的纯JS库，特别是在从0到1的项目搭建初期，至少可以为开发者减少30%的工

ゝ一世哀愁。/ 2023年02月14日 02:14/ 0 赞/ 12 阅读

相关使前后交互更加方便---封装uni.request

先声明服务器端的地址： var URL = { //ifndef H5 base:'<scheme>://<host>:<port>',

我不是女神ヾ/ 2022年12月03日 02:29/ 0 赞/ 163 阅读

相关【前后交互】微信小程序的echarts前后交互解决

一、描述在微信小程序中使用echarts时，像Vue中直接把data传入是不行的，原因是因为小程序的生命周期一样。二、解决办法使用全局变量进行传入数据第一步：

超、凢脫俗/ 2022年11月28日 00:48/ 0 赞/ 207 阅读

相关 Vue前后端交互

<template> <div id="app"> <h3>1. Promise基本使用</h3> <input t

小鱼儿/ 2022年10月14日 00:43/ 0 赞/ 74 阅读

相关使电脑变得更加快、更加流畅

一，如果是固态硬盘 1，win+r 调出运行框,输入msconfig ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

妖狐艹你老母/ 2022年08月30日 04:21/ 0 赞/ 253 阅读

相关前后端交互指南

作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。毕竟，我们要构建一个大的

水深无声/ 2022年07月17日 00:38/ 0 赞/ 341 阅读

相关前后台交互

[通过AngularJS实现前端与后台的数据对接（一）——预备工作篇][AngularJS] 最近，笔者在做一个项目：使用AngularJS，从而实现前端与后

小咪咪/ 2022年06月05日 00:42/ 0 赞/ 406 阅读

相关前后端交互，API数据交互

此博客希望可以帮助那些对于前后端如何交互？API是什么？等知识比较模糊的同学有一个初步的认识。问：为什么需要前后端交互？答：问这个问题之前，你需要对web的标准规范有基

本是古典何须时尚/ 2022年05月15日 12:34/ 0 赞/ 541 阅读

相关 EXTJs前后台交互

<1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "",

今天药忘吃喽~/ 2022年02月13日 19:22/ 0 赞/ 362 阅读

相关 uniapp unirequest 网络请求封装

import urlConfig from './config.js' const request = {} const headers

╰半橙微兮°/ 2021年09月17日 22:36/ 0 赞/ 573 阅读