精华内容
下载资源
问答
  • 小程序请求封装支持和promise,原生封装,请求拦截,封装header 1.原生封装 httputils.js 不支持Promise 用法 1.引用 import httpUtils from '../../libs/httputils'; get请求 httpUtils.getReq('get/list', res=> { ...
  • 主要介绍了php实现的http请求封装,结合实例形式分析了php基于curl的http请求操作功能实现技巧与使用方法,需要的朋友可以参考下
  • 全局请求封装:request.js // 全局请求封装 const token = uni.getStorageSync('token'); import service from "./service.js"; // 请求字典 export default (url, method, params) => { uni.showLoading({ ...

    目录结构:

    uniapp 请求封装,拦截器:请求拦截、响应拦截

    主要就是request.jsapi.js文件,其他是我这边的业务需求文件。

    1. 全局请求封装:request.js

    // 全局请求封装
    export default (url, method, params) => {
    const token = uni.getStorageSync('token');
    	uni.showLoading({
    		title: "加载中"
    	});
    	if(!token ){
    		// 执行没有登录的逻辑
    
    		return;
    	}
    	return new Promise((resolve, reject) => {
    		wx.request({
    			url: "https://www.piop.cn/api" + url,
    			method: method,
    			header: {
    				token: token
    			},
    			data: {
    				serviceId: api[0].serviceId,
    				...params
    			},
    			success(res) {
    				resolve(res.data);
    			},
    			fail(err) {
    				reject(err);
    			},
    			complete() {
    				uni.hideLoading();
    			}
    		});
    	});
    };
    

    说明:

    uniapp 请求封装,拦截器:请求拦截、响应拦截

    总之请求拦截操作就放在7-14行中间,响应拦截操作就放在success()fail()complete()函数体里。


    2. 接口封装:api.js

    import request from "./request.js"
    
    export default {
    	// 密码登录
    	passwordLogin(params) {
    		return request("/platform/metadata/logon", "GET", params)
    	},
    
    	// 短信登录
    	noteLogin(params) {
    		return request("/platform/metadata/login", "GET", params)
    	},
    
    	// 获取验证码:用于短信登陆、密码找回、用户注销
    	getAuthCode(params) {
    		return request("/platform/metadata/sms", "GET", params)
    	},
    
    	// 获取注册账号验证码
    	getRegistAuthCode(params) {
    		return request("/platform/metadata/sms1", "GET", params)
    	},
    
    	// 登录者信息
    	getMyInfo(params) {
    		return request("/platform/metadata/bindinfo", "GET", params)
    	},
    
    	// 注册账号
    	registerAccount(params) {
    		return request("/platform/metadata/register", "GET", params)
    	},
    
    	// 找回密码
    	retrievePassword(params) {
    		return request("/platform/metadata/back", "GET", params)
    	},
    
    	// 注销账号
    	offAccount(params) {
    		return request("/platform/metadata/cancel", "GET", params)
    	},
    	
    }
    

    调用接口:

    uniapp 请求封装,拦截器:请求拦截、响应拦截

    结果:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Vue Promise的axios请求封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Alamofire - swift 代理请求封装,闭包回调封装
  • 本项目包含uniapp请求api封装,三级联动地址选择-可传入默认值,图片上传等组件
  • 主要介绍了nodejs实现的http、https 请求封装操作,结合实例形式分析了node.js针对http、https 请求的封装与使用相关操作技巧,需要的朋友可以参考下
  • AFNetworking网络请求封装Demo,简单调用即可实现post,get请求。对返回响应进行处理,可以方便地取出error信息和响应内容dict。
  • okHttp请求封装的http请求工具类源码以及依赖okHttp-3.11.0jar包
  • 主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了微信小程序 http请求封装详解及实例代码的相关资料,需要的朋友可以参考下
  • okHttp 请求封装

    2017-03-29 10:12:28
    OKHttp 请求的整理封装,其他方法看,而根据例子中的GET /POST 方法进行添加
  • ios-网络请求封装.zip

    2019-07-11 19:11:10
    网络请求封装,创建一个网络数据工具,来处理项目中的所有网络请求数据
  • uni-app项目请求封装 - 请求拦截器

    万次阅读 2020-03-27 11:49:02
    uni-app项目请求封装 - 请求拦截器 由于最近公司需要开发移动端,于是我选择了uni-app,之前因为没什么时间一直都没有对请求进行封装所以今天当做经验积累吧,封装一下uni-app的请求,希望相互学习大神勿喷 1.先创建...

    uni-app项目请求封装 - 请求拦截器


    由于最近公司需要开发移动端,于是我选择了uni-app,之前因为没什么时间一直都没有对请求进行封装所以今天当做经验积累吧,封装一下uni-app的请求,希望相互学习大神勿喷

    1.先创建一个request.js

    
    const baseUrl = 'https://test.com';    //此为测试地址,并非真实地址
    // 定义基础请求路径(后端服务器地址)
    const baseRequest = (opts, data) => {
    	let baseDefaultOpts = {
    		url: baseUrl+opts.url,
    		// 请求接口地址
    		data: data,
    		// 传入请求参数
    		method: opts.method,
    		// 配置请求类型
    		header: opts.method == 'get' ? {'X-Requested-With': 'XMLHttpRequest',"Accept": "application/json","Content-Type": "application/json; charset=UTF-8"} : {'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    		// 配置请求头
    		dataType: 'json',
    		}
    		let promise = new Promise(function(resolve, reject) {
    			uni.request(baseDefaultOpts).then(
    				(res) => {
    					console.log(JSON.stringify(res[1].data))
    					if(res[1].data.state == '100' || res[1].data.state == 100){
    						// 后端返回的状态码100为成功状态,成功则返回请求结果,在app调试时可以通过console.log(JSON.stringify(res[1].data))来查看返回值(以项目实际情况为准)
    						resolve(res[1].data)
    					}
    					if(res[1].data.state == '105' || res[1].data.state == 105){
    						// 后端返回状态码为105则为未登录状态(以项目实际情况为准)
    						uni.showToast({
    							icon:'none',
    						    title: '尚未登录',
    						    duration: 2000 
    						}); 
    						// 尚未登录的逻辑处理
    						return false
    					}
    				}
    			).catch(
    				(response) => {
    					reject(response)
    				}
    			)
    		})
    		return promise	
    };
    

    至此我们就完成了普通请求封装,接下是带Token的请求

    //带Token请求
    const TokenRequest = (opts, data) => {
    	let hjr_token = "";
    	uni.getStorage({
    		key: 'hjr_token',
    		success: function(res) {
    			hjr_token = res.data
    		}
    	});
    	//此token是登录成功后后台返回保存在storage中的
    	let DefaultOpts = {
    		url: baseUrl+opts.url,
    		data: data,
    		method: opts.method,
    		header: opts.method == 'get' ? {'Token': hjr_token,'X-Requested-With': 'XMLHttpRequest',"Accept": "application/json","Content-Type": "application/json; charset=UTF-8"} : {'Token': hjr_token,'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    		dataType: 'json',
    	}
    	let promise = new Promise(function(resolve, reject) {
    		uni.request(DefaultOpts).then(
    			(res) => {
    				console.log(JSON.stringify(res[1].data))
    				if(res[1].data.state == '100' || res[1].data.state == 100){
    					// 后端返回的状态码100为成功状态,成功则返回请求结果,在app调试时可以通过console.log(JSON.stringify(res[1].data))来查看返回值(以项目实际情况为准)
    					resolve(res[1].data)
    				}
    				if(res[1].data.state == '105' || res[1].data.state == 105){
    					// 后端返回状态码为105则为未登录状态(以项目实际情况为准)
    					uni.showToast({
    						icon:'none',
    					    title: '尚未登录',
    					    duration: 2000 
    					}); 
    					// 尚未登录的逻辑处理
    					return false
    				}
    			}
    		).catch(
    			(response) => {
    				reject(response)
    			}
    		)
    	})
    	return promise
    }
    

    然后进行导出

    // 将对象导出外部引入使用
    export default {
    	baseUrl,
    	baseRequest,
    	TokenRequest
    }
    
    

    在需要使用到的地方 import request from ‘@/utils/request.js’ 引入

    let opts={
        url: '/captureRecord/find.jhtml',
        //接口地址(写你自己的地址)
        method: 'post'
        //请求类型
    };
    let param={
    	pageSize:10,
    	pageNumber:1
    	//该请求所需要的参数
    };
    request.baseRequest(opts, param).then(res => {
      console.log(JSON.stringify(res));
      //打印请求返回的数据         
    },error => {console.log(error);})  
    

    至此就完成基本的uni-app请求与拦截器封装。由于写的比较仓促,所以仅供参考,如果有错误的地方或是需要加以完善的地方也欢迎大神提出

    展开全文
  • 主要介绍了微信小程序request请求封装,验签代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • swift,基于Alamofire数据请求封装
  • 小程序请求,wx.request 请求封装

    万次阅读 2019-08-06 10:46:47
    小程序请求,wx.request 请求封装 // 提示与加载工具类 export default class Tips { static success(title) { wx.showToast({ title: title, icon: 'success', duration: 2000 }) } static error...

    小程序请求,wx.request 请求封装

    
     // 提示与加载工具类
    export default class Tips {
        static success(title) {
        wx.showToast({
          title: title,
          icon: 'success',
          duration: 2000
        })
      }
      static error(title) {
        wx.showToast({
          title: title ||'出错啦~',
          image: '/static/images/error.png',
          mask: true,
          duration: 1500
        })
    }
    // 请求封装
        /**
        *@params url        string       接口地址
        *@params data       object       请求参数
    	*@prams  [method]   string     请求方式GET||POST
    	*@prams  [header]  string     请求头类型
        **/
         const host = 'localhost:8080'//仅为示例,并非真实的地址
    export function request(url, data, method, header) {
      wx.showLoading({
        title: '加载中' // 数据请求前loading
      })
      return new Promise((resolve, reject) => {
        wx.request({
          url: host + url, // 仅为示例,并非真实的接口地址
          method: method || 'POST',
          data: data,
          header: {
            'Authorization': '',
            'content-type': header || 'application/json', // 默认值
            'sign': '',
          }, //配置请求头
          success: function (res) {
              //请求成功回调
            wx.hideLoading();
            if (!res.data.success) {
              //请求有响应,但有异常
              Tips.error(res.data.msg)
            }
            resolve(res.data)
          },
            
          fail: function (error) {
              //请求失败
            wx.hideLoading();
            Tips.error(error.msg)
            reject(error.msg)
          },
          complete: function () {
            wx.hideLoading();
          }
        })
      })
    }
    export function get(url, data) {
      return request(url, data, 'GET')
    }
    export function post(url, data) {
      return request(url, data, 'POST')
    }
    

    使用方式

    import {
      request
    } from '@/utils/index.js'
    export const getActDetail = (params) => request('app/user?id='+params, {}, 'GET', '') 
    export const getActList = (params) => request('app/page', params, 'POST', '') 
    
    
    展开全文
  • 小程序请求API接口,网络请求封装

    千次阅读 2018-06-24 18:24:19
    前几日关注的用户问我有没有封装好的小程序网络请求接口,那么小程序请求API接口,网络请求封装,我们应该怎么编写呢? 今天我们说下小程序请求API接口的实现,然后就分享这样的小案例。希望对大家有所帮助。 不多...
    概述

    前几日关注的用户问我有没有封装好的小程序网络请求接口,那么小程序请求API接口,网络请求封装,我们应该怎么编写呢?

    今天我们说下小程序请求API接口的实现,然后就分享这样的小案例。希望对大家有所帮助。

    不多说了,二当家今天终于不用上图啦!

    我封装的request的代码
    /**
     * @desc    API请求接口类封装
     * @author  geekxz@aliyun.com
     * @date    2018-04-12
     */
    /**
     * POST请求API
     * @param  {String}   url         接口地址
     * @param  {Object}   params      请求的参数
     * @param  {Object}   sourceObj   来源对象
     * @param  {Function} successFun  接口调用成功返回的回调函数
     * @param  {Function} failFun     接口调用失败的回调函数
     * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
     */
    function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) {
        requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun)
    }
    /**
     * GET请求API
     * @param  {String}   url         接口地址
     * @param  {Object}   params      请求的参数
     * @param  {Object}   sourceObj   来源对象
     * @param  {Function} successFun  接口调用成功返回的回调函数
     * @param  {Function} failFun     接口调用失败的回调函数
     * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
     */
    function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) {
        requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun)
    }
    /**
     * 请求API
     * @param  {String}   url         接口地址
     * @param  {Object}   params      请求的参数
     * @param  {String}   method      请求类型
     * @param  {Object}   sourceObj   来源对象
     * @param  {Function} successFun  接口调用成功返回的回调函数
     * @param  {Function} failFun     接口调用失败的回调函数
     * @param  {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
     */
    function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) {
        if (method == 'POST') {
            var contentType = 'application/x-www-form-urlencoded'
        } else {
            var contentType = 'application/json'
        }
        wx.request({
            url:    url,
            method: method,
            data:   params,
            header: {'Content-Type': contentType},
            success: function (res) {
                typeof successFun  == 'function' && successFun(res.data, sourceObj)
            },
            fail: function (res) {
                typeof failFun     == 'function' && failFun(res.data, sourceObj)
            },
            complete: function (res) {
                typeof completeFun == 'function' && completeFun(res.data, sourceObj)
            }
        })
    }
    module.exports = { 
        requestPostApi,
        requestGetApi
    }
    使用第一步

    在app.js中引入封装的文件const request = require(‘./utils/request.js’) ,然后定义接口域名apiUrl: ‘https://www.geekxz.com‘,

    /**
     * @desc    简单API请求示例
     * @author  geekxz@aliyun.com
     * @date    2018-04-12
     */
    const request = require('./utils/request.js')
    App({
      request: request,
      getUserInfo:function(cb){
        var that = this
        if(this.globalData.userInfo){
          typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
          //调用登录接口
          wx.login({
            success: function () {
              wx.getUserInfo({
                success: function (res) {
                  that.globalData.userInfo = res.userInfo
                  typeof cb == "function" && cb(that.globalData.userInfo)
                }
              })
            }
          })
        }
      },
      /**
       * 定义的接口域名
       */
      apiUrl: 'https://www.geekxz.com',
      globalData:{
        userInfo:null
      }
    })
    调用封装好的方法
    var app = getApp()
    Page({
      /**
       * 存储页面数据
       */
      data: {
          expressData : {},
      },
      /**
       * 接口调用成功处理
       */
      successFun: function(res, selfObj) {
          selfObj.setData({
              expressData : res,
          })
      },
      /**
       * 接口调用失败处理
       */
      failFun: function(res, selfObj) {
          console.log('failFun', res)
      },
      /**
       * 页面加载时初始化数据
       */
      onLoad: function() {
          var url     = app.apiUrl+'/query'
          var params  = {
              type   : 'zhongtong',
              postid : '424621263550',
          }
          //@todo 网络请求API数据
          app.request.requestGetApi(url, params, this, this.successFun, this.failFun)
      }
    })

    如何快速制作微信小程序预约功能, 在这里只要十分钟

    如何快速制作微信小程序预约功能, 在这里只要十分钟

    开发 | 小程序「分享图」生成难? 一招教你轻松解决

    开发 | 小程序「分享图」生成难? 一招教你轻松解决

    关于Geekxz的那些事儿

    更多分享,请持续关注“极客小寨”

    展开全文
  • 主要介绍了微信小程序HTTP接口请求封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • http请求封装

    2019-05-08 09:04:39
    封装了一下java 的http请求工具类要求jdk版本在1.8及以上
  • 主要介绍了vue axios重复点击取消上一次请求封装的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • guzzlehttp请求封装

    千次阅读 2018-10-18 20:21:47
    guzzlehttp请求封装 /** * 发送请求 * https://guzzle-cn.readthedocs.io/zh_CN/latest/quickstart.html * * @param string $url * @param array $params * @param string $method * @pa...
  • vue请求封装

    2018-12-17 10:33:24
    vue前端http配置请求头、请求地址、对请求参数进行统一处理;
  • 微信小程序 请求 封装, promise, 请求并发限制, 排队请求, ...wx-request-master.zip
  • Cocos Creator Http请求封装

    千次阅读 2019-07-01 16:35:54
    /** * Http 请求封装 */ const HttpHelper = cc.Class({ extends: cc.Component, statics: { }, properties: { }, /** * get请求 * @param {string} url * @param {functi...
  • iOS AFN网络请求封装(单例模式)可根据http://blog.csdn.net/error/404.html?from=http%3a%2f%2fblog.csdn.net%2faiyang10%2farticle%2fdetails%2f49470403博客内容理解使用
  • 微信小程序代码,小程序网络请求封装,还包含用户信息授权以及手机号授权等相关功能代码,供初学者参考,用处很大。
  • 微信小程序封装request的demo,网络请求封装wxa-demo-master.zip

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 694,072
精华内容 277,628
关键字:

请求封装