wx.request(OBJECT)

OBJECT参数说明:

参数名 类型 必填 说明
url String 开发者服务器接口地址
data Object、String 请求的参数
header Object 设置请求的 header , header 中不能设置 Referer
method String 默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String 默认为 json。如果设置了 dataType 为 json,则会尝试对响应的数据做一次 JSON.parse
success Function 收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数 说明 最低版本
data 开发者服务器返回的数据  
statusCode 开发者服务器返回的状态码  
header 开发者服务器返回的 HTTP Response Header 1.2.0

data 数据说明 最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:

  • 对于 header['content-type'] 为 'application/json' 的数据,会对数据进行 JSON 序列化
  • 对于 header['content-type'] 为 'application/x-www-form-urlencoded' 的数据,会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

示例代码:

wx.request({  url: 'test.php', //仅为示例,并非真实的接口地址  data: {     x: '' ,     y: ''  },  header: {

  1. 'content-type': 'application/json'
  2. },
  3. success: function(res) {
  4. console.log(res.data)
  5. }
  6. })
    微信小程序开发时,使用公共的url端口,自定义函数

    module.exports = {

// API 接口
API_HOST: "url/"

}

  1. const config = require('../config.js');
  2. module.exports = {
  3. //get方式请求
  4. GET: function (url = '', data = {}, fn) {
  5.   console.log(data);
  6.   wx.request({
  7.   url: config.API_HOST + url,//请求地址
  8.   method: 'get',//请求方式
  9.   data: data,//请求参数
  10.   header: { "Content-Type": "application/x-www-form-urlencoded" },
  11.   success: function (res) {
  12.   fn(res);
  13. }
  14. });
  15. },
  16. //post方式请求
    POST: function (url = '', data = {}, fn) {
    wx.request({
      url: config.API_HOST + url,//请求地址
      method: 'post',//请求方式
      data: data,//请求参数
      header: { "Content-Type":"application/x-www-form-urlencoded"},
      success: function (res) {
      fn(res);
      }
    });
    },
  17. }
  1.  
  1. // 加载配置文件
  2. const config = require('config.js');
  3. var app=getApp();
  4. module.exports = {
  5. /**
  6. * get方式请求,ulr是请求api号,token是登陆token,不用token就传空,fn是函数成功的回调函数,data为向后台传递的参数by:张涛20180303
  7. */
  8. GET: function (url = '',token='' ,data = {}, fn,fail) {
  9. wx.request({
  10. url: config.API_HOST + url,//请求地址
  11. method: 'get',//请求方式
  12. data: data,//请求参数
  13. header: { "Content-Type": "application/json" ,'token':token},
  14. success: function (res) {
  15. // 判断token是否失效
  16. if (res.data.code=='JWT00002'||res.data.code=='JWT00001'||res.data.code=='JWT00004'||res.data.code=='403') {
  17. wx.navigateTo({
  18. url:'/pages/login/login'
  19. })
  20. return false;
  21. }
  22. fn(res);
  23. },
  24. fail: function (res) {
  25. // wx.showToast({
  26. // title: '请求服务器失败,请稍后再试!',
  27. // icon: 'loading',
  28. // duration: 2000
  29. // })
  30. }
  31. });
  32. },
  33.  
  34. /**
  35. * post方式请求
  36. */
  37. POST: function (url = '',token='', data = {}, fn ,fail) {
  38. wx.request({
  39. url: config.API_HOST + url,//请求地址
  40. method: 'post',//请求方式
  41. data: data,//请求参数
  42. header: { "Content-Type": "application/json",'token':token},
  43. success: function (res) {
  44. // 判断token是否失效 如果失效就跳转登录页面
  45. if (res.data.code=='JWT00002'||res.data.code=='JWT00001'||res.data.code=='JWT00004'||res.data.code=='403') {
  46. wx.navigateTo({
  47. url:'/pages/login/login'
  48. })
  49. return false;
  50. }
  51. fn(res);
  52. },
  53. fail: function (res) {
  54. // wx.showToast({
  55. // title: '请求服务器失败,请稍后再试!',
  56. // icon: 'loading',
  57. // duration: 2000
  58. // })
  59. }
  60. });
  61. }
  62.  
  63. }

增加个人封装的小程序请求方法

微信小程序之上传下载交互api的更多相关文章

  1. 微信小程序之上传多张图片

    之前写过一篇小程序商品发布的博客,里面有上传多张图片的功能,这里单独拿出来实现以下,小程序的upLoadFile一次只能上传一张图片,需要循环调这个接口来实现 for (var i = 0; i &l ...

  2. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  3. 微信小程序城市定位(百度地图API)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

  4. 微信小程序上传Excel文本文件功能

    问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...

  5. 微信小程序上传多张图片,及php后台处理

    微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...

  6. 微信小程序上传与下载文件

    需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...

  7. 微信小程序--代码构成---JS 交互逻辑

    一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. <view>{{ msg }}&l ...

  8. 微信小程序入门教程之四:API 使用

    今天是这个系列教程的最后一篇. 上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本.有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面.本篇就介绍怎么使 ...

  9. 微信小程序上传后发布或者体验版测试无数据解决办法

    在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...

随机推荐

  1. Python基础篇(九)

    Key Words: 文件迭代器,标准输入,GUI工具包,数据库操作SQLlite,socket编程 文件迭代器 >>> f= open("some.txt",& ...

  2. Dapper入门教程(二)——执行非查询语句

    描述 你可以从任意实现IDbConnection的类对象中调用Dapper的扩展方法"Execute".它能够执行一条命令(Command)一次或者多次,并返回受影响的行数.这个方 ...

  3. chrome无法登陆账号,显示操作超时的解决方案

    起因 今天重装了下windows操作系统,准备登陆chrome浏览器,以同步各种插件(你懂的),结果是...无法登陆账号,显示操作超时,真是无语了. 碰到了这个问题第一个直觉是:FQ.突然想到如果修改 ...

  4. sublime插件AndyJS2安装教程

    1.下载AndyJS2包,已整理上传,下载AndyJS2.rar,附上网址.(https://github.com/jiaoxueyan/AndyJS2) 2.点击首选项(preference)=&g ...

  5. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  6. 详解CSS display:inline-block的应用

    阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加 ...

  7. [Python Study Notes]批量将ppt转换为pdf v1.0

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  8. git服务器配置http请求

    使用apache 配置http协议的git库 在CentOS上基于Apache http服务搭建git远程仓库(一) 基于http方式的git服务器搭建 搭建http协议的git服务器 Linux g ...

  9. kvm克隆

    virt-clone --original aming2 --name aming3 --file /data/kvm/aming3.qcow2   相关的克隆命令 克隆前必须关闭虚拟机   virs ...

  10. Linux下的压力测试工具:ab、http_load、webbench、siege

    一.ab 1.1 介绍 ab是apache自带的一款功能强大的测试工具.      安装了apache一般就自带了. 1.2 下载 同apache. 1.3 安装 同apache. 1.4 安装结果 ...