精华内容
下载资源
问答
  • 微信小程序提供的wx.request请求API,文档介绍的很清楚。直接使用代码未免累赘,并且处理一些返回操作不好统一处理,所以就对wx.request做了一下封装。 1.新建js文件(request => index.js) // let baseUrl...

    一、前言

    微信小程序提供的wx.request请求API,文档介绍的很清楚。直接使用代码未免累赘,并且处理一些返回操作不好统一处理,所以就对wx.request做了一下封装。

    1.新建js文件(request => index.js)

    // let baseUrl = 'http://******/'; //测试
    // let baseUrl = 'http://******/';//预发布
    let baseUrl = 'https://*****/';//线上
    module.exports = function (url, method, data = {}) {
      let meth = method.toUpperCase()
      if (meth != "GET" && meth != "DELETE" && meth != "POST" && meth != "PUT") {
        meth = 'GET' //不传情况下默认'GET'
      }
      if(getApp().globalData.userInfo != null){//已登陆情况下必传参数(项目需要看情况而定)
        data['token'] = getApp().globalData.userInfo.token;
        data['uid'] = getApp().globalData.userInfo.uid;
      }
      return new Promise(function (resolve, reject) {
        wx.request({
          header:{
            'content-type': meth == 'POST' ? 'application/x-www-form-urlencoded' : 'application/json'
          },
          url: baseUrl + url,
          data: data,
          method: meth,
          success: function (res) {
            //返回信息统一处理操作
    
            //resolve用于具体调用中
            resolve(res)
          },
          fail: function (res) {
            //错误信息统一处理操作
    
            reject(res)
          }
        })
      })
    }

    2.js引用

    import requestApi from '../../request/index.js' //引入
    
    requestApi(your_request_url, 'POST', {
        union_id: id //参数
    }).then((res) => {
        console.log(res)
    }).catch((err)=>{
        console.log(res)
    })

     

    展开全文
  • 主要介绍了微信小程序request出现400的问题解决办法的相关资料,需要的朋友可以参考下
  • 微信小程序 request接口的封装实例代码 小程序request接口的封装(本质上是对request回调函数再次回调) module.exports.getData = function (url) { var data = arguments.length > 1 && arguments[1] !== ...
  • 微信小程序是一种借助互联网获取内容的应用,而非单机应用,对互联网通信的依赖很深。因此,微信小程序在开发过程中最重要的一环就是处理前后台通信。 在基本应用中,常常会遇到,请求失败,或者操作数错误的情况;...

    微信小程序是一种借助互联网获取内容的应用,而非单机应用,对互联网通信的依赖很深。因此,微信小程序在开发过程中最重要的一环就是处理前后台通信。

    在基本应用中,常常会遇到,请求失败,或者操作数错误的情况;请求失败多数情况下是前后台通信不畅造成的,例如,不稳定的蜂窝数据环境下或者较为拥堵的宽带网络下,通常,一个前端 request 方法应该具备会处理这些问题能力。

    • 不稳定网络环境造成的通信失败 - 再次请求,通常会进行 3 次请求
    • 不稳定网络环境,造成网络通信迟缓 - 超过 3 秒钟后台没有返回数据,则弹出等待请求提示(通常为loading)直到返回结果或者服务器超时为止
    • 不稳定环境造成通信超时 - 再次请求一次,如果不成功,则返回失败
    • 服务器异常
      • 可忽略行为 - 前台忽略改行为继续流程
      • 服务器一时繁忙 - 前台再次按照原有参数进行再次请求
      • 服务器操作数异常 - 前台再次采集操作数,重新发送请求
      • 服务器错误 - 不可继续运行的错误,前台继续执行会造成 ‘crash’ ,并且当前操作流程已经出现了中断,返回首页或者中端当前操作流程,返回到起始位置

    微信提供了基础 request 方法,该方法的使用方式和大多数框架提供的 ajax 方式类似

    https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

    对比其与 jquery 方法他们的可选参数

    $.ajax({
    
        url, // 请求路径,微信中名为 path
        data, // 请求参数,微信中同名,参数可以是 object / string / arrayBuffer
        type, // post | get,微信中名为 method
        complete,// xhr, status 请求完成函数,微信中同名
        success, // 当请求成功,参数 result, status, xhr;微信中具有同名函数,使用 res 对象封装     result,status,xhr等信息,具体为 { data, statusCode, header }
        error, // xhr, status, error,微信中命名为 fail,同样使用 res 封装参数信息
        jsonp, // 重写回调函数的字符串,微信中为 dataType,参数只有 json 或者 null
    
        timeout, // 本地超时时间 - 微信中放置在 app.json 文件中
    
        contentType :// 指定发送内容类型值,默认使用 "application/x-www-form-urlencoded",微信在此处对该参数进行拆解处理,并且将其封装成了 header 方法,该方法可以提供自定义 header 属性,参数是         object;微信默认 'application/json' - body : raw 格式
    
        dataFilter, // 
    
        async, 	  // 异步同步控制
        beforeSend, // 在请求执行前
        cache,    // 是否缓存页面请求
        context,   // 为所有相关 ajax 规定 this 值
    
    })

     

    经过比对发现,微信 request 的请求可选参数还是尽可能的简化和抽象了 ajax 的一些繁琐结构,特别是 header 的使用上。将一些意义不明确的参数重新命名也看出微信团队在设计微信小程序时,有着大量 h5 等 web 应用开发的经验作为参考。

    请求处理层次

    • 直接使用地方 target_request
    • 一次 http 处理
      • http 协议层
      • 自定义协议层

    划分层次方式

    • 对复用的原始函数进行包装
    • 在复用函数结构中进行层次划分
      • 由软件(编码)设计者将模块抽象成
        • 传入
        • 业务
        • 传出

      • 抽离出来的传入和传出层做统一处理
      • 如果业务端有复用,则可以再次进行抽象

     

    微信 request 处理方法:

    微信处在处理请求过程中,重要的三个返回事件:

    1. success

    2. fail

    3. complete

    代码示例:

    // 构造对象方式使用
    function wx_auto_request(config){
    
    // 内部记录
          let request_time = 0; // 记录请求次数
          let request_options;  // 记录当前请求的参数
    
    // 封装微信请求方法
          function request(options) {
    
       
            let _opts = {}; // 原始 wx.request 可选参数
            let timer; // 定时器句柄
    
      // 自定义协议错误码处理方式 - 该处使用 数组游标 定义错误码
      // 该种形式错误码可以不断进行累进,但是不能进行错误分类(无权码)
    
            let ErrCode = [
    
    // 错误码 0
              {
                rep: function () {
     // 封装在对象中,可以直接进行错误处理
     if(config.errCoed0){
    config.errCoed0();
     }
                  return false; // 返回 false 则使用 if 忽略
                }
              },
    
    // 错误码 1
              {
                rep: function () {
    
     request_time = 0; // 清楚迭代游标 
    
                  request_options = options; // 记录当前操作数
                  request(request_options);  // 进行一次迭代
     
     // 再次注意,错误处理的位置,应该在内部的某些记录变化后执行
     if(config.errCoed1){
    config.errCoed1();
     }
    
                  return true; // 不进行忽略操作,忽略操作时在 判断中做 return 操作,中断之后的操作。
    
                }
              },
    
    // 错误码 2
              {
                rep: function () {
    
                  request_time = 1; // 错误码进行再次请求,游标设置为 1,最大值为 2
    
                  wx.hideLoading();
    
                  wx.showToast({
    
                    title: "请求重试",
                    icon: "none",
                    duration: 1000
    
                  })
    
     if(config.errCoed2){
    config.errCoed2();
     }
     
     /*** 以下是自定义错误处理 ***/
    
     // 返回首页
                  setTimeout(function () {
    
                    wx.reLaunch({
                      url: '/pages/main',
                    })
    
                  }, 1100);
    
                  /*** 以上为自定义错误处理 ***/
    
                  return true;
    
                }
              }
    
            ]
    
       // 重构 wx.request 选择参数
            for (let k in options) {
    
    // 特殊化的 success , fail 和 complete 单独拿出来处理
              if (k == 'success' || k == 'fail' || k == 'complete') {
    
                break;
    
              }
    
              _opts[k] = options[k];
    
            }
    
                     // 重点处理 success 和 fail 方法
            _opts['success'] = function (d) {
    
    // 成功请求清空 timer,该方法可以直接使用,不用做 timer 是否为 interval判断
              clearTimeout(timer);
              // 隐藏 loading
              wx.hideLoading();
    
    // 判断是否含有自定义协议部分
              if (typeof d.errCode != 'undefined') {
    
      // 判断是否具有该错误码
                if (ErrCode[d.errCode] != undefined) {
    
      // 是否可以忽略该错误码继续执行
                  if (ErrCode[d.errCode].rep()) return;
    
                }
    
              }
    
    // 可选参数,是否处理或者接收返回结果,回调函数
              if (typeof options.success != 'undefined') {
    
                options.success(d);
    
              }
    
            }
    
                     // 微信小程序原生错误处理
            _opts['fail'] = function (err) {
    
    // 自动进行两次再请求操作,超过则提示错误
              if (request_time < 2) {
    
                request_time++; // 游标自增
                return request(options); // 原参数迭代
    
              } else {
    
                if (typeof options.fail != 'undefined') {
    
                  options.fail(err);
    
                }
        // 重置对象记录,并且提示错误
                request_time = 0;
    
                wx.hideLoading();
    
                wx.showToast({
    
                  title: "连接错误,请稍后重试",
                  icon: "none",
                  duration: 1100
    
                })
    
        /*** 自定义基础错误,程序无法继续进行访问 ***/
                setTimeout(function () {
    
                  wx.reLaunch({
                    url: '/pages/main',
                  })
    
                }, 1200);
    
                return;
    
              }
    
            };
    
    
       // 请求前定时器,如果到了设置时间,则产生 loading 加载中提示效果
    
            timer = setTimeout(function () {
    
              wx.showLoading({
                title: '加载中'
              })
    
            }, 4000)
    
       // 最后执行微信 request 操作
    
            wx.request(_opts);
    
          };
    
          return request;
    
    }

    示例小程序:

     

    展开全文
  • 主要介绍了微信小程序request请求后台接口php的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 微信小程序request请求后台接收不到参数问题一. 小程序部分代码二. 后端三. 问题代码四. 请求头 一. 小程序部分代码 发一个普通的request请求 wx.request({ url: app.globalData.server_prefix + '/api/v1.0/...
  • 最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api。 官方参数说明如下   OBJECT参数说明...
  • 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx.request这个API,调用方法如下 wx.request({ url: 'www.baidu.com', //仅为示例,并非真实的接口地址 data: { x: '', y: '' },...

    1,前言


    在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx.request这个API,调用方法如下

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

    作为一个合格的前端开发,为了代码质量和优雅度(其实是因为懒),避免不了封装一些重复代码和功能,来使开发过程更加酣畅淋漓。

    2,实现思路


    项目中,wx.request的很多参数都是固定的,只需要改变data的值,而一般我们的逻辑处理都是在wx.request的回调successfailcomplete中操作的,并且有部分逻辑也是相同的,(比如判断接口返回数据是否成功,根据成功或失败显示不同的提示框等等),所以博主在这边用了Promise来做了一个链式调用封装,少去了大部分重复语句。

    3,实现过程


    首先我们需要创建一个公共的requestFn.js文件,在这个文件中写我们的wx.request的封装,然后还需要创建一个公共的Api.js文件,这个里面存放我们的接口地址和自定义的function,最后,在微信小程序根目录下的app.js中找到globalData,在里面写上项目常用的请求域名,具体的如下图。

    目录结构
    目录结构

    app.js
    BaseURL

    3.1,request的封装


    requestFn.js中,我们要做到的是创建一个function,在里面统一处理wx.request需要的参数和返回值,还有请求过程中的Loading提示,Toast提示,然后通过module.exports将这个function暴露出去,完整代码如下。

    const app = getApp();
    const baseURL = app.globalData.baseURL;
    const FN = require('../publicFn/public');
    
    const Request = (options) =>{
      return new Promise((resolve, reject) => {
        FN.Loading(1);
        wx.request({
          url: baseURL + options.url || '',
          data: options.data || {},
          method: options.method || 'POST',
          header:{'content-type': "application/x-www-form-urlencoded"},
          responseType:options.responseType || "",
          timeout:15000,
          success (res) {
            FN.LoadingOff();
            if(res.statusCode === 200){
              if(res.data.status === "y"){
                resolve(res.data);
              }else{
                FN.Toast(res.data.info);
              };
            }else{
              FN.Toast(res.errMsg);
            };
          },
          fail (res) {
            FN.Toast("网络开小差了");
            reject(res);
          }
        })
      })
    };
    
    module.exports = {
      Request
    };
    

    其中的FNFN.Toast还有FN.Loading是博主自己二次封装的一些微信小程序API,可以参考博主的另一篇文章:微信小程序API交互的自定义封装

    3.2,api的封装


    request已经封装好了,下面就是将项目需要的请求接口,还有各个模块的数据请求方法定义一下,统一放在api.js中,方便维护(ps:如果你的模块非常多,可以按模块建立不同的api.js,按需引入)。
    api.js
    详细代码如下

    const requestFn = require('../requestFn/requestFn');
    
    const API = {
      banner:"/web/getBanner.am",//轮播图
    };
    
    const HTTP = {
      /**
      * banner
      * @param {String} userId - 用户ID
      * @param {String} appClientTypeCode - 设备端类型DICT_APP_CLIENT_TYPE_CODE_ANDROID(安卓DICT_APP_CLIENT_TYPE_CODE_IOS(苹果)
      */
      banner(userId, appClientTypeCode){
        return requestFn.Request({
          url:API.banner,
          data:{
            userId:userId,
            appClientTypeCode:appClientTypeCode,
          }
        })
      },
    }
    
    module.exports =  HTTP;
    

    4,实际使用


    在这几个步骤之后,我们的一个request的封装就完成了,接下来就是实际应用了,调用方法如下。

    1,在我们的页面对应的js文件头部先要引入我们对应的api.js

    import  HTTP  from "../../requestFn/Api";
    

    2,在Page对象中定义方法

    // 获取banner图
    getBanner () {
        let userId = null;
        if(app.globalData.userMsg !== null && app.globalData.userMsg.userId) userId = app.globalData.userMsg.userId;
        let system = app.globalData.systemInfo.system;
        let type = "DICT_APP_CLIENT_TYPE_CODE_IOS";
        if(system){
          if(!~system.indexOf("iOS")) type = "DICT_APP_CLIENT_TYPE_CODE_ANDROID";
        };
        HTTP.banner(userId, type)
        .then(res => {
          	this.setData({
              	bannerList:res.infoObject
            });
        });
     }
    

    如果看了觉得有帮助的,我是@鹏多多i,欢迎 点赞 关注 评论;
    END

    面向百度编程

    公众号

    公众号

    往期文章

    个人主页

    展开全文
  • 作为后端屌对于前端确实讳莫如深,JS中的类型Object竟然不能直接通过POST传入到后台Flask中,您会发现获取的是[object Object],这货在Flask中只是个Str,哈哈...于是,开始寻求解决方案:方案一,通过GET或者POST...

    作为后端屌对于前端确实讳莫如深,JS中的类型Object竟然不能直接通过POST传入到后台Flask中,您会发现获取的是[object Object],这货在Flask中只是个Str,哈哈...

    于是,开始寻求解决方案:

    方案一,通过GET或者POST传参,将Object转换为Str请求数据:

    1.在util.js中定义一个JS函数:

    function json2Form(json) {

    var str = [];

    for (var p in json) {

    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));

    }

    return str.join("&");

    }

    module.exports = {

    json2Form: json2Form,

    }

    2.在相应的页面加载该函数,并进行调用:

    var Util = require('../../../utils/util.js')

    wx.request({

    url: App.Config.post_Data,//自己的服务接口地址

    method: 'POST',

    header: {

    'content-type': 'application/x-www-form-urlencoded'

    },

    data: { postdata:Util.json2Form(params)},//注意这里哈!

    success: function (data) {console.log('已经提交数据到数据库')}

    })

    当然,这里也可以也可以用你的URl+Util.json2Form(params),然后用GET请求。

    3.Flask后台获取数据:

    postdata = request.values.get('postdata')

    方案二,通过POST传参,将Object转换为Json()格式:

    1.小程序直接将请求数据转换为Json格式:

    wx.request({

    url: App.Config.post_Data,

    method: 'POST',

    header: {

    'content-type': 'application/x-www-form-urlencoded'

    },

    data: { postdata: JSON.stringify(params) },//注意这里哈!

    success: function (data) {console.log('已经提交数据到数据库')}

    })

    2.Flask后台处理:

    postdata = request.values.get('postdata')

    print (json.loads(postdata)) # 注意这里哈

    postdata=json.loads(postdata)# 注意这里哈,变回DICT格式,亲切ing

    好啦,以后能用POST就用它获取数据了,继续Flask开发小程序的进程!!!

    本主坐标皇城西安,准Pythoner,如果你有Idea但是差个猿可以聊聊哈 ......

    展开全文
  • 微信小程序request请求封装

    千次阅读 2019-04-08 17:52:48
    在项目中获取后台数据时,会应用到 wx.request({}) 发起https网络请求...文章目录API完整request请求MD5.JSGET请求POST请求返回数据处理JSON数据排序方法导出模块 API wx.request网络请求API 参考文章 完整request请...
  • 微信小程序request同步请求

    千次阅读 2019-03-19 15:12:00
    今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简单易懂 const getData = ...
  • 微信小程序request请求封装 uni-app

    千次阅读 2019-08-02 10:19:42
    微信小程序request请求封装 uni-app let requestCount = 0; // 带loading框的请求,默认post请求 // 取token const token = () => uni.getStorageSync('accountInfo').token; // console.log(token); export ...
  • api.js import config from '@/config' ...export function request (url, method, header, data) { return new Promise((resolve, reject) => { wx.request({ data, method, header, ...
  • 1、GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'conten...
  • 微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:9096/admin.php/index/jj', method : 'POST', header: { 'content-type'...
  • 为了避免在小程序开发中使用大量重复且臃肿的代码,一般来说,开发者都会封装一个请求以便于直接调用,这里封装了一个简单简单的请求: let maxLen = 6, // 批量删除图片的最大值 responseArr = []; // 存批量删除...
  • 很大概率是请求头的问题 把请求头信息从 header: { ‘content-type’: ‘application/json’ }, 换成 header: { ‘content-type’: ‘application/x-www-form-urlencoded’ }, 就可以解决
  • 微信小程序POST请求

    千次阅读 2016-11-17 17:45:35
    微信小程序post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo。页面代码: <view> {{title}} </view><span style="font-size:24px;"><!--index.wxml--> ...
  • 这段时间都在开发小程序。封装是少不了的部分。经过三轮的修改修改再修改之后,得到了下面现在一直在用的这版。如果小伙伴你只需要封装,不考虑需不需要重新登录的话可以把if(res.data.code ==5000)这段去掉。下面...
  • 后台php接口:... 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(
  • 微信小程序 网络请求(post请求,get请求)发布时间:2020-08-30 12:35:12来源:脚本之家阅读:228作者:lqh微信小程序 网络请求1.post请求:onLoad: function() {that = this;wx.request( {url: "url",header: {...
  • 微信小程序的js header头很重要,不然后端拿不到值 getProductInfo: function (e) { var that = this; wx.request({ url: 'http://localhost:8080/getProductInfo', data: { "id": e }, header: { "Content-...
  • const request = (url, options) => { return new Promise((resolve, reject) => { wx.request({ url: `${app.globalData.serviceUrl}${url}`, method: options.method, data: options.method

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,365
精华内容 6,946
关键字:

微信小程序requestpost

微信小程序 订阅