精华内容
下载资源
问答
  • 微信小程序请求封装

    2019-02-25 22:51:18
    封装的一个request的请求,用的时候只需要引入,然后把参数写进去,把地址写进去就好。
  • 主要介绍了微信小程序HTTP接口请求封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序 http请求封装 示例代码 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, ...
  • 微信小程序 请求 封装, promise, 请求并发限制, 排队请求, ...wx-request-master.zip
  • 微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题。 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) ...
  • 微信小程序接口封装、原生接口封装、request、params封装 小程序方法封装,简单的小程序接口封装
  • 微信小程序如何封装api接口 首先创建个http文件夹(可自定义名字) 一:创建个env.js文件用来设置公共访问的url,即环境地址 module.exports = { //开发环境 dev:{baseUrl:http://localhost:3000}, //测试环境 ...
  • 主要介绍了微信小程序request请求封装,验签代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 在page下建立文件夹 require.js var tokenKey = "access-token"; ... // 例外不用token的地址 ...//请求头处理函数 function CreateHeader(url, type) { let header = {} if (type == 'POST_PARAMS

    在page下建立文件夹
    在这里插入图片描述
    require.js

    var tokenKey = "access-token";
    var serverUrl =  "http://124.204.51.174:8080/gcs"; 
    // 例外不用token的地址
    var exceptionAddrArr = [  '/user/login',];
    
    //请求头处理函数
    function CreateHeader(url, type) {
      let header = {}
      if (type == 'POST_PARAMS'){
        header = {
          'content-type': 'application/x-www-form-urlencoded'
        }
      }else{
        header = {
          'content-type': 'application/json'
        }
      }
      if (exceptionAddrArr.indexOf(url) == -1) {  //排除请求的地址不需要token的地址
        let token = wx.getStorageSync(tokenKey);
        // header.Authorization = token;
        header['access-token'] = token;
      }
      return header;
    }
    //post请求,数据在body中
    function postRequest(url,data){
      let header = CreateHeader(url,'POST');
      console.log(header,'header')
      return new Promise((resolve, reject) => {
        wx.request({
          url: serverUrl + url,
          data: data,
          header: header,
          method: 'POST',
          success: (res => {
            if (res.statusCode === 200) {
              //200: 服务端业务处理正常结束
              resolve(res)
            } else {
              reject(res)
            }
          }),
          fail: (res => {
            reject(res)
          })
        })
      })
    }
    //post请求,数据按照query方式传给后端
    function postParamsRequest(url, data) {
      let header = CreateHeader(url,'POST_PARAMS');
        let useurl = url;
        console.log(useurl);
      return new Promise((resolve, reject) => {
        wx.request({
          url: serverUrl + useurl,
          data: data,
          header: header ,
          method: 'POST',
          success: (res => {
            console.log(res, '1212')
            if (res.statusCode === 200) {
              //200: 服务端业务处理正常结束
              resolve(res)
            } else {
              reject(res)
            }
          }),
          fail: (res => {
            reject(res)
          })
        })
      })
    }
    //get 请求
    function getRequest(url, data) {
      let header = CreateHeader(url, 'GET');
      return new Promise((resolve, reject) => {
        wx.request({
          url: serverUrl + url,
          data: data,
          header: header,
          method: 'GET',
          success: (res => {
            if (res.statusCode === 200) {
              //200: 服务端业务处理正常结束
              resolve(res)
            } else {
              reject(res)
            }
          }),
          fail: (res => {
            reject(res)
          })
        })
      })
    }
    //put请求
    function putRequest(url, data) {
      let header = CreateHeader(url, 'PUT');
      return new Promise((resolve, reject) => {
        wx.request({
          url: serverUrl + url,
          data: data,
          header: header,
          method: 'PUT',
          success: (res => {
            if (res.statusCode === 200) {
              //200: 服务端业务处理正常结束
              resolve(res)
            } else {
              reject(res)
            }
          }),
          fail: (res => {
            reject(res)
          })
        })
      })
    }
    //delete请求
    function deleteRequest(url, data) {
      let header = CreateHeader(url, 'DELETE');
      return new Promise((resolve, reject) => {
        wx.request({
          url: serverUrl + url,
          data: data,
          header: header,
          method: 'DELETE',
          success: (res => {
            if (res.statusCode === 200) {
              //200: 服务端业务处理正常结束
              resolve(res)
            } else {
              reject(res)
            }
          }),
          fail: (res => { 
             reject(res) 
          })
        })
      })
    }
    module.exports.getRequest = getRequest;
    module.exports.postRequest = postRequest;
    module.exports.postParamsRequest = postParamsRequest;
    module.exports.putRequest = putRequest;
    module.exports.deleteRequest = deleteRequest;
    

    index.js

    import { getRequest, postRequest, postParamsRequest, putRequest, deleteRequest,
    } from './requst.js'
    const base = '';
    // 接口应用举例
    export const requst_post_login = data => postParamsRequest(`/login`, data);
    
    

    应用时直接调用即可:

    import { requst_post_login} from '../api/index.js'
    
    requst_post_login(e.detail.value).then(res=>{
          res = res.data;
          if(res.code == 1){
            wx.setStorage({
              key: 'access-token',
              data: res.data.token,
            })
            wx.showToast({
              title: '登录成功',
              icon: 'success',
            })
            setTimeout(function () {
              wx.hideToast()
            }, 2000)
            wx.navigateTo({
              url: '../home/home'
            })
          }
        }).catch(err=>{
          console.log('ajax_err',err)
        })
    
    
    展开全文
  • 微信小程序请求封装带token认证

    万次阅读 2018-10-23 16:47:36
    * @param url:String 请求地址(根据请求地址判断是否添加token) * @param complete:Function 回调函数 */ function CreateHeader(url, complete) { var header = { 'content-type': 'application/json' } if ...

     request.js

    var apiHost = "http://localhost:5003/";
    var tokenKey = "token";
    // 登录地址, 根据这个地址来设置token
    var logInUrl = "/Account/LogInForMiniProgram";
    // 例外不用token的地址
    var exceptionAddrArr = [
      'http://localhost:8080',
    ];
    
    /** 
     * @param url:String  require(必需) 请求地址相对路径
     * @param data:Object   可选  请求数据
     * @param success:Function  可选   成功回调函数
     * @param fail:Function     可选    失败回调函数
     */
    function getRequest(url, data, success, fail) {
      CreateHeader(url, function (header) {
        wx.request({
          url: apiHost + url,
          method: 'GET',
          data: data,
          header: header,
          success: function (res) {
            if (success && typeof success === "function") {
              success(res);
            }
          },
          fail: function (error) {
            if (fail && typeof fail === "function") {
              fail(error);
            } else {
              console.log(error);
            }
          }
        })
      });
    }
    /** 
     * @param url:String  require(必需) 请求地址相对路径
     * @param data:Object   可选  请求数据
     * @param success:Function  可选   成功回调函数
     * @param fail:Function     可选    失败回调函数
     */
    function postRequest(url, data, success, fail) {
      CreateHeader(url, function (header) {
        wx.request({
          url: apiHost + url,
          method: 'POST',
          data: data,
          header: header,
          success: function (res) {
            if (url === logInUrl) {
              wx.setStorage({
                key: tokenKey,
                data: res.data.result
              })
            }
            if (success && typeof success === "function") {
              success(res);
            }
          },
          fail: function (error) {
            if (fail && typeof fail === "function") {
              fail(error);
            } else {
              console.log(error);
            }
          }
        })
      });
    }
    
    /** 
     * @param url:String    请求地址(根据请求地址判断是否添加token)
     * @param complete:Function 回调函数
     */
    function CreateHeader(url, complete) {
      var header = {
        'content-type': 'application/json'
      }
      if (exceptionAddrArr.indexOf(url) == -1) {  //排除请求的地址不需要token的地址
        wx.getStorage({
          key: tokenKey,
          success: function (res) {
            header.Authorization = 'Bearer ' + res.data;
          },
          fail: function (error) {
            console.log(error);
          },
          complete: function () {
            complete && typeof complete === 'Function' ? complete(header) : null;
          }
        });
      } else {
        complete && typeof complete === 'Function' ? complete(header) : null;
      }
    }
    
    module.exports.getRequest = getRequest;
    module.exports.postRequest = postRequest;

    用户可根据自己的项目适当修改.

    展开全文
  • 利用promise 实现微信小程序内置wx.request()请求方法的封装,及微信一些内置方法的封装。支持Get和Post请求
  • 一、微信小程序请求实现方式 小程序发起网络请求 需用到 wx.request(Object object) 例如: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-...

    一、微信小程序请求实现方式

    小程序发起网络请求 需用到 wx.request(Object object)

    
     例如:
     wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
      }
    })
    

    当小程序请求发生以下错误时
    在这里插入图片描述
    第一种情况
    点击详情>点击本地设置
    在这里插入图片描述勾选不校验合法域名

    在这里插入图片描述
    第二种情况:
    后期上线,需要提前将域名添加到小程序后台中(且协议必须是 https)
    进入小程序官网

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    二、微信小程序封装请求

    作用:方便统一管理项目接口,便于项目后期维护与管理
    首先创建http文件夹在http目录下面创建env.js

    	//这里使用的接口呢都是自己模拟的,可以根据自己的需求进行添加
    module.exports={
    	//开发环境的url
    	dev:{
    		baseUrl:"http://localhost:3000"
    	},
    	//测试环境url
    	test:{
    		baseUrl:"http://www.test.com"
    	},
    	//线上环境url
    	prod:{
    		baseUrl:'https://api.it120.cc'
    	}
    }
    
    

    继续在http目录下面创建一个request.js文件来二次封装wx.request

    // 引入env中的url
    const { baseUrl } = require('./env.js').prod; 
    //在这里添加我们的专业域名
    const subDomain = 'xxx';
    
    module.exports = {
        /**
         * 二次封装wx.request
         * url:请求的接口地址
         * method:请求方式 GET,POST....
         *  data:要传递的参数
         *isSubDomain:表示是否添加二级子域名 true代表添加, false代表不添加
         */
        request: (url, method, data, isSubDomain) => {
            console.log('这是我封装的ajax请求', baseUrl);
          	//这里使用ES6的写法拼接的字符串
            let _url = `${baseUrl}/${isSubDomain ? subDomain: '' }${url}`;
            console.log(_url);
            return new Promise((resolve, reject) => {
    			wx.showLoading({
    				title: '正在加载',
    			});
                wx.request({
                    url: _url,
                    data: data,
                    method: method,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    success: (res) => {
                        console.log('从接口获取到的数据', res);
    					let { code } = res.data;
    					if(code===0) {
    						resolve(res.data);
    						wx.hideLoading();
    					}else {
    						wx.showToast({
    							title: '数据请求错误',
    						})
    					}
                    },
    				fail() {
    					reject('接口有误,请检查')
    				}
                });
    			
            });
        },
    }
    
    

    http目录下面在创建一个api.js文件来封装我们的reuest请求

    //引入封装的reuest请求
    const { request } = require('./request.js')
    //基于业务封装的接口
    module.exports={
    
    	/* 轮播图 */
    	getBanner:()=>{
    		return request(','GET',{},true);
    	},
    	/* 封装商品列表的方法 */
    	getGoodsList:()=>{
    		return request('要请求的路径','请求方式|GET|POST',{要携带的参数},是否添加子域名 |true|false);
    	},
    	/* 添加商品收藏 */
    	addGoodsFav: (goodsId, token)=>{
    		return request('要请求的路径', 'POST', { goodsId:goodsId, token:token},true);
    	},
    	/* 获取商品的分类 */
    	getGoodsCate:()=>{
    		return request('要请求的路径','GET',{},true);
    	}
    }
    
    

    然后在引入到需要的页面上操作就行了

    如:
    const { getBanner} = require('../../http/api.js')
    
      onShow:function(){
        getBanner().then((res)=>{
          console.log(res);
        }),
    }
    
    展开全文
  • 主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 小程序接口封装方法,很全的封装方法,便于在后期中接口的对接使用
  • 微信小程序代码,小程序网络请求封装,还包含用户信息授权以及手机号授权等相关功能代码,供初学者参考,用处很大。
  • 主要介绍了微信小程序设置全局请求URL及封装wx.request请求操作,结合实例形式分析了微信小程序针对wx.requset请求封装及调用操作相关实现技巧,需要的朋友可以参考下
  • 主要介绍了微信小程序 request接口的封装实例代码的相关资料,需要的朋友可以参考下
  • Introduction wx.request 的配置、axios 的调用方式 源码戳我 ... 支持 请求缓存(内存或本地缓存),可设置缓存标记、过期时间 use app.js @onLaunch import axios form 'axios' axios.creat({
  • 网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊。 // 官方例子 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: ...
  • 最近在重构公司小程序,看到了重构前的小程序的统一接口管理只能是用“眼花缭乱”来形容了,令我没想到的是我试着搜索了一下小程序请求api管理,然而大多数都是几年前的文章,封装的五花八门,眼花缭乱。所以重构小...

    前言

    最近在重构公司小程序,看到了重构前的小程序的统一接口管理只能是用“眼花缭乱”来形容了,令我没想到的是我试着搜索了一下小程序请求api管理,然而大多数都是几年前的文章,封装的五花八门,眼花缭乱。所以重构小程序第一步,封装请求及统一api管理,就像在vue项目中管理api那样。
    之前是这样的,简短的一个地址被拆成了几个变量加来加去???及不优雅。
    在这里插入图片描述

    正文开始

    1. 小程序项目根目录创建http文件夹,文件夹中新建http.js,新建api.js 这两个文件。
      在这里插入图片描述

    2.小程序http.js文件中配置基地址,新建request函数,返回一个promise对象,导出函数

    //  配置基地址
    const baseURl = 'http://192.168.0.117:6007/' //  本地服务器
    function request({
    	url='',
    	method='GET',
    	header={ "content-type": "application/json" },
    	data={}
    }) {
    	return new Promise((resolve, reject) => {
    		wx.showLoading({
    			title: '加载中...'
    		})
    		wx.request({
    			url: baseURl + url,
    			method: method,
    			data:data,
    			header:header,
    			timeout:5000,
    			//  成功回调
    			success: res => {
    				wx.hideLoading()
    				resolve(res.data)
    			},
    			//  错误回调
    			fail: err => {
    				wx.hideLoading()
    				
    				wx.showToast({
    					title: '网络错误!',
    					icon:'error',
    					duration: 2000
    				})
    				reject(err)
    
    				console.log('cuowy');
    			},
    			//  请求完成回调
    			complete: () => {
    				// wx.hideLoading()
    			}
    		});
    	})
    }
    
    export default request
    

    3.api.js文件中,导入http.js文件,为每个请求创建请求方法,后期根据自己接口多的话可以api文件拆分,将不同模块不同类型的请求归类拆分到不同的文件夹,便于后期维护。

    import request from './http.js'
    
    //  登录
    export function login (data) {
    	return request({
    		url:'/user/login',
    		data
    	})
    }
    // 注册
    export function register (data) {
    	return request({
    		url:'/user/register',
    		method:'POST',
    		data
    	})
    }
    // 重置密码
    export function forgetPassword (data) {
    	return request({
    		url:'/user/forgetPassword',
    		method:'POST',
    		data
    	})
    }
    

    4.页面中按需引入api请求方法,async await调用,这样更大的一个好处就是当前页面中使用了那些api一目了然。

    //获取应用实例
    const app = getApp();
    import { login } from '../../http/api'
    Page({
    
    	/**
    	 * 页面的初始数据
    	 */
    	data: {
    		statusBarHeight: app.globalData.statusBarHeight, //导航栏的高度
    		versions: app.globalData.versions, //  版本号
    		phone: "", //  手机号
    		password: "", //  密码
    	},
    
    	/**
    	 * 生命周期函数--监听页面加载
    	 */
    	onLoad: function (options) {
    		
    	},
    	//  登录
    	async getLogin(params,type='default') {
    		//  此处调用登录请求
    		let res = await login(params)
    		if (res.code !== 1000) {
    			//  请求失败处理
    		}
    		//  处理请求成功的逻辑
    		//  跳转主页 延时2秒
    		redirectTo('index', {}, 2000)
    	},
    	
    })
    

    大概就是这样了!

    ok跑路!

    展开全文
  • 在最近也是教学生来进行微信小程序封装的一个请求,其实个人感觉请求封装应该是很多人做过,但是殊途同归,一直以来就写博客啥的就比较少了,所以今天我来说一下我的封装请求,但是在这里我没有写关于Token机制的...
  • 微信小程序如何封装数据请求

    千次阅读 2020-05-12 11:25:45
    完成一个小程序项目,我们肯定会请求跟多接口,为了我们代码的可读性和可维护性更好,我们可以将我们请求的接口进行封装封装步骤如下。 1.首先在根目录下创建一个http文件夹,在文件夹下分别创建:env.js,api.js,...
  • 微信小程序request请求后台接收不到参数问题一. 小程序部分代码二. 后端三. 问题代码四. 请求头 一. 小程序部分代码 发一个普通的request请求 wx.request({ url: app.globalData.server_prefix + '/api/v1.0/...
  • 主要介绍了微信小程序 封装http请求实例详解的相关资料,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,604
精华内容 9,441
关键字:

微信小程序请求封装

微信小程序 订阅