精华内容
下载资源
问答
  • uniapp封装网络请求,通过Promise

    千次阅读 2020-08-28 17:49:21
    } } export{errdata} request.js 公用地址 let url = '' 单个请求,这里只是举一个例子 let getpreferurl = `${url}forshop/getprefer` export{getpreferurl} 如果getpreferurl是GET请求如何使用 // 引入接口 ...

    话不多说,直接开淦

    首先创建一个api文件夹,然后创建三个js文件

    api.js,errdata.js,request.js
    

    api.js

    // 引进提示
    import {errdata} from 'api/errdata.js'
    
    // GET
    let listing = function(urling){
    	return new Promise((resolve,reject)=>{
    		uni.request({
    			url:urling,
    			method:'GET',
    		})
    		.then((res)=>{
    			// console.log(res[1])
    			uni.showLoading({
    				title:'加载中'
    			})
    			resolve(res[1])
    			setTimeout(()=>{
    				uni.hideLoading()
    			},1000)
    		})
    		.catch((err)=>{
    			let errs = '服务器错误 请稍后再试'
    			errdata.errlist(errs)
    			reject(err)
    		})
    	})
    }
    
    // POST请求
    let publicing = function(urling,shopdata){
    	return new Promise((resolve,reject)=>{
    		uni.request({
    			url:urling,
    			method:'POST',
    			data:shopdata
    		})
    		.then((res)=>{
    			uni.showLoading({
    				title:'加载中'
    			})
    			// console.log(res[1])
    			resolve(res[1])
    			setTimeout(()=>{
    				uni.hideLoading()
    			},1000)
    		})
    		.catch((err)=>{
    			let errs = '服务器错误 请稍后再试'
    			errdata.errlist(errs)
    			reject(err)
    		})
    	})
    }
    
    export{listing,publicing}
    

    errdata.js是一个错误提示

    // 提示
    const errdata = {
    	errlist(err){
    		uni.showToast({
    			icon:'none',
    		    title: err,
    		    duration: 3000
    		});
    	}
    }
    
    export{errdata}
    

    request.js

    公用地址
    let url = ''
    
    单个请求,这里只是举一个例子
    let getpreferurl = `${url}forshop/getprefer`
    
    export{getpreferurl}
    

    如果getpreferurl是GET请求如何使用

    // 引入接口
    	import {listing} from '../../api/api.js'
    // 引入请求地址
    	import {getpreferurl} from '../../api/request.js'
    
    
    listing(getpreferurl).then((res)=>{})
    

    如果是POST请求

    const data={}
    
    publicing(getpreferurl,data).then((res)=>{})
    
    展开全文
  • uniapp封装网络请求(post+token)

    千次阅读 2020-08-18 17:58:28
    下面是请求封装,您需要在根目录下新建Get.js文件,然后复制以下代码即可。 // 注释将会特别详细,只有您有合理地耐心看完将不会出现问题 function request(url, data) { return new Promise((resolve) => { ...

    先看代码,复制使用即可,一共三个步骤,具体使用方式下文将清楚罗列,任何新手都可以轻松了解和使用。同时您将为此省下很多宝贵时间。

    下面是请求的封装,您需要在根目录下新建Get.js文件,然后复制以下代码即可。

    // 注释将会特别详细,只有您有合理地耐心看完将不会出现问题
    function request(method,url, data) {
    	return new Promise((resolve) => {
    		uni.showLoading({
    			title:'加载中...'
    		});
    		uni.request({
    			method: method,
    			url: url,
    			data: data,
    			header: {
    				'Accept': "*/*",
    				'content-type': 'application/json;charset=utf-8',
    				'token': "",//您可根据如本地存储或者vuex再此处使用逻辑或 来插入token
    				'Authorization':'',//有的时候这里不一定是 token 还可能是 Authorization
    			},
    			success(res) {
    				resolve(res)
    				uni.hideLoading()
    			},
    			fail(err) {
    				uni.showToast({
    					title: '请求失败',
    					icon: 'none',
    					duration: 1500,
    				})
    				uni.hideLoading()
    			}
    		})
    	})
    }
    function POST(method,url,data) {
      return request(method,url,data)
    }
    module.exports = {
      POST
    }
    

    接下来是配置调用的方法,我推荐您新建一个API.JS文件,在根目录或者您习惯的地方,然后复制以下代码即可

    import { POST } from "POST"
    let base = 'https://www.zhijiaotai.com/education';
    //微信登录
    export const WXlogin = params => { return POST('POST',`${base}/WeChat/login`,params).then(res => res.data); }; 
    //通过openid获取用户的信息
    export const OpenidGetUser = (openId,params) => { return POST('GET',`${base}/User/openid/${openId}`,params).then(res => res.data); }; 
    

    这是最后一步,在任何您想调用GetList这个接口下数据的页面下复制以下代码

    import { GetList } from "../../Api"  //您的api路径
    //然后在您的函数中 或者 onload 测试一下
    //请注意 GetList 是个方法,您想传输的参数可以这样设置   不需要参数时不传即可
    onload(){
    	let params = {
    	name:'姓名' 
    	}
    	GetUserMsg(params).then(res=>{
    		console.log(res) //然后就可以看见您所需要的数据
    	})
    }
    

    其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

    展开全文
  • 首先在项目的根目录创建一个util.js文件,在js文件中写入当前封装请求的方法 let apiReq={ req(obj){ var method = obj.method ; // 请求方式,默认为GET var url = 'http://192.168.0.122:8080'+obj.url; // ...

    首先在项目的根目录创建一个util.js文件,在js文件中写入当前封装请求的方法

    let apiReq={
    	req(obj){
    		var method = obj.method ; // 请求方式,默认为GET
    		var url = 'http://192.168.0.122:8080'+obj.url; // 请求路径 
    		var data = obj.data||undefined; // 请求数据
    		var header = obj.header; // 请求头
    		var success = obj.success; // 成功回调函数
    		uni.showLoading({title:'加载中...'});
    		uni.request({
    			url: url,
    			data: data,
    			method: method,
    			header: header,
    			success: ((res) => {
    				if(res.statusCode === 200){
    					success(res)
    					uni.hideLoading();
    				}else{
    					uni.hideLoading();
    					uni.showModal({
    						content:"" + '请求失败'
    					});
    				}
    			}),
    			fail:((err)=>{
    				fail(err)
    			})
    		})
    	}
    }
    export default apiReq
    

    封装完毕之后,在main.js中引入util.js 并通过Vue.prototype导出

    import apiReq from './util.js'
    Vue.prototype.$apiReq = apiReq
    

    最后在需要使用的页面使用就可以了

    // 获取背景图
    			backgroundMap(){
    				this.$apiReq.req({ // 创建对象
    					url: '/ui/shop/banner/list', // 示例请求路径
    				    method:"get", //如果是post请求 可以直接修改为post
    					data : {
    					     'nickName':username, //传参
    						 'sex':gender,
    						 'avatar':avatarUrl,
    						 'loginIp':val,
    					},
    					success: (res) => {
    						this.imageURL=res.data.rows[1].bannerImg
    					},
    				 })
    			}
    
    展开全文
  • 前端:uniapp封装网络请求笔记

    千次阅读 2021-09-27 00:14:12
    uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本...

    uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术,所以有必要进行前端网络请求的封装,今天小编给大家介绍一下,如何基于uniapp实现网络请求的简单封装,希望对新手能有所帮助!

    042c20dee1ef8f94b45ebec51791c6ef.png

    1、首先安装HbuilderX开发工具创建一个uniapp的项目。

    4ce575eae0f74c2b2de5fc59ff24aea2.png

    2、common目录下创建 config,js、request.js 文件

    config,js

    const BASE_URL="https://qqlykm.cn/api/yan/gc.php";//随机查询古诗接口

    request.js

    import {GlobeConfig} from 'config.js'
    export const request = (options)=>{
    	return new Promise((resolve, reject)=>{
    		// 封装主体:网络请求
    		uni.request({				
    			url: "/api"+options.url,
    			data: options.data || {},		
          // 默认值GET,如果有需要改动,在options中设定其他的method值
    			method: options.method || 'GET',      
    			success: (res) => {
    				console.log(res.data);		// 控制台显示数据信息
    				resolve(res)
    			},
    			fail: (err) =>{
    				// 页面中弹框显示失败
    				uni.showToast({
    					title: '请求接口失败'
    				})
    				// 返回错误消息
    				reject(err)
    			},
    			catch:(e)=>{
    				console.log(e);
    			}
    		})
    	}
    	)
    }
    // https://qqlykm.cn/api/yan/gc.php 测试接口
    {"code":"200","msg":"success" ,
     "data":
     {"Poetry":"千人之诺诺,不如一士之谔谔。",
      "Poet":"null",
      "Poem_title":"史记·商君列传"}
    }

    3、main.js 导入封装的网络请求

    //导入封装的网络请求
    import {request} from 'common/request.js'
    Vue.prototype.$request = request

    4、新建测试 demo.vue

    <template>
    	<view class="content">	
    		<view class="article-meta">
    		  <text class="">{{Poem_title}}</text>				 
    		</view>
    		<view>
    			<text class="">作者:{{Poet}}</text>
    		</view>
    		<view class="article-content">
    		  <view>{{Poetry}}</view>
    		</view>
    	</view>
    
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				Poem_title: "",
    				Poet: "",
    				Poetry: ""
    			}
    		},
    		onLoad() {
    			this.initData();
    		},
    
    		methods: {
    			async initData() {
    				debugger;
    				const res = await this.$request({
    					url: '', //请求的url默认可以写在配置文件里面
    					data: {
    						// 接口的请求参数,可能为空
    					}
    				})
    				// 给页面的数据赋值	
    				if (res.data.msg == "success") {
    					this.Poem_title = res.data.data.Poem_title;
    					this.Poet = res.data.data.Poet=="null" ? "佚名": res.data.data.Poet;
    					this.Poetry = res.data.data.Poetry;
    				}
    
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    </style>

    运行页面

    bbb700e2e76ef55b230f3f71b75bef22.png

    IT技术分享社区

    个人博客网站:https://programmerblog.xyz

    7a2eb5fcc5c1a8fa9db26c998cc69307.png

    文章推荐程序员效率:画流程图常用的工具程序员效率:整理常用的在线笔记软件远程办公:常用的远程协助软件,你都知道吗?51单片机程序下载、ISP及串口基础知识硬件:断路器、接触器、继电器基础知识

    展开全文
  • uniapp 请求方式嵌套一层Promise用async和await的形式去写代码,错误请求统一处理,类同步方式写代码告别回调地狱
  • uniapp 封装request请求

    2021-08-25 17:42:05
    1.首先在根目录新建... ... import Vue from 'vue' const request = (params) => { // 显示加载数据的提示 uni.showLoading({ ... return new Promise(function(resolve, reject) { const baseUrl = Vue.protot.
  • 网络请求封装 根据thorUI开源框架给出的代码进行封装,还有如果需要token来请求的话,需要自己去获取token,然后写到 代码: const tui = { delayed: null, //接口地址 interfaceUrl: function() { return '...
  • ├── api # 所有请求 │ └── user.js # 用户请求api ├── store # 全局store管理 │ └── modules # api模块 │ │ └── user.js # 用户请求模块 │ └── index.js # 状态管理初始化 ├── uti
  • uniapp 封装请求

    2021-04-16 15:01:26
    method: "GET", // 请求方式 timeout: 6000 // 请求超时时间 } interface.js //导入私有配置 import _config from "./config.js"; export default function $http(options) { options.url = _config.url +
  • uniapp封装GET请求

    2021-06-30 14:54:00
    //GET方法,method接口,/api/v1/login,data传递数据{} const get = async (method, data = {}) => { ... 'Content-Type': 'application/json', //自定义请求头信息 } // 判断token是否存在
  • uniapp封装post请求

    2021-06-30 14:47:36
    //POST方法 , method是接口,如/api/v1/login。data是传递参数{mobile:...} const post = async (method, data) => { return new Promise(... 'Content-Type': 'application/json', //自定义请求头信息 }; //
  • 每个项目开始前,都要做好充分的准备工作,网络封装必不可少直接上代码 1.根目录下新建 config.js 文件 const config = { base_url: '这里可以是生产环境或者测试环境' } export { config } 这里主要配置接口的基本...
  • uni-app网络请求封装-及其使用

    千次阅读 2020-05-08 14:16:23
    所以,在给项目接入接口前,我们可以将网络请求" uni.request(OBJECT) "进行封装,随后在全局文件(main.js)中引入,如此就可以剩下许多重复的代码,减小项目文件的大小 以下为步骤,及小编我个人所编写的源码...
  • uniapp封装请求

    2020-05-02 20:21:42
    0){ return uni.showToast({ title:'数据获取失败....', icon:'none' }) } resolve(res.data) }, fail:(err)=>{ uni.showToast({ title:'请求接口失败....',...
  • uniapp封装原生uni.request网络请求 目录结构: 首先建立request.js文件 export default function (options) { var baseUrl = "https://autumnfish.cn" // var baseUrl = "http://musicapi.leanapp.cn" return ...
  • uniapp网络请求封装、普通页面跳转与Tab页面跳转携带数据 一、uniapp网络请求封装 1、新建一个MinRequest类,对uni.request进行简单封装,并添加拦截器 import axios from 'axios' const config = Symbol('...
  • console.log("【" + res.config.requestId + "】 请求参数:" + JSON.stringify(res.config.data)) } console.log("【" + res.config.requestId + "】 响应结果:" + JSON.stringify(res)) } //TODO 除了...
  • 1.首先创建一个config.js的文件,在里面配置你公共的请求地址 const baseurl = '公共部分的请求地址'; //公共接口请求地址 export default baseurl; 然后再创建一个request.js的文件,里面配置一些公共的部分 ...
  • uniapp 接口封装请求

    2020-12-11 15:08:14
    1.封装request请求,在utils/request.js const request = (options)=>{ return new Promise((resolve,reject)=>{ uni.request({ url:options, method:options.method || 'GET', //header: { // '...
  • uniapp封装请求方法(含请求期间的Loading样式)一、封装步骤二、封装思路解析 一、封装步骤 1. 在项目的根目录创建目录结构如下: 封装的请求方法代码如下: // 全局请求路径,也就是后端的请求基准路径 const ...
  • uni-app - 封装请求(简易)

    千次阅读 2020-11-10 20:52:32
    有时候,我们需要将请求封装起来,原因是很可能每次请求接口在 HEADS 头部携带 token,或 data 携带证书密钥(token + 字符串 + 时间戳),如果不封装起来,每次请求都需要重复来写。 代码 打开 main.js 加入以下...
  • 找到util -->...// 定一个常量 存储请求...// 封装请求 export const http = (url,params)=>{ let urls; // 判断传入的url是否包含 http 字段 if(url.indexOf("http")!=-1){ urls = url; }else{ // B.
  • 全局请求封装:request.js // 全局请求封装 const token = uni.getStorageSync('token'); import service from "./service.js"; // 请求字典 export default (url, method, params) => { uni.showLoading({ ...
  • 自己根据公司同事留下的代码改的,uniapp请求封装 import { BASE_URL } from './config.js' // 公共的请求方法 function request ({ url, method, // 不填为不需要token,为true为需要token isAuth, data, //...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,745
精华内容 698
关键字:

uniapp封装网络请求