微信小程序封装http请求

Q:网上很多封装http请求的方法,我就收藏了一种比较通俗易懂的方法。

A:对封装的要求:一是在封装函数里设置header,发送token。二是在封装函数里对后台返回的参数作出统一处理,例如如果statusCode不返回200,统一做出异常处理,相当于过滤功能。

var API_COMMON = ‘http://192.168.2.105:8080/‘
var requestHandler = {
  params: {},
  success: function (res) {
    // success
  },
  fail: function () {
    // fail
  },
}

//GET请求
function GET(url,requestHandler) {
  request(‘GET‘, url, requestHandler)
}
//POST请求
function POST(url,requestHandler) {
  request(‘POST‘, url, requestHandler)
}

function request(method, url, requestHandler) {
  //注意:可以对params加密等处理
  var params = requestHandler.params;
  wx.request({
    url: API_COMMON + url,
    data: params,
    method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: { token: wx.getStorageSync(‘whToken‘) },
    success: function (res) {
      //注意:可以对参数解密等处理
      res.statusCode == 200 ? requestHandler.success(res) : console.log(res);
    },
    fail: function () {
      requestHandler.fail()
    },
    complete: function () {
      // complete
    }
  })
}

调用也很简单:

    let params = {code: app.globalData.code}
    utils.POST("mp/login", {
      params: params,
      success: res => {
        console.log(res)
      }, fail: () => { }
    })

原文地址:https://www.cnblogs.com/weihuan/p/8359440.html

时间: 2024-10-30 05:02:17

微信小程序封装http请求的相关文章

监控微信小程序wx.request请求失败

在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些: wx.request 失败| 微信开放社区 微信小程序 wx.request 请求失败- SegmentFault 思否 小程序部分机型小程序用户无法发起 wx.request 请求,网络错误问题 ... wx.request()失败,requ

微信小程序开发:http请求

在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

微信小程序封装请求的js

1.配置访问服务器的地址config.js: const config = {//192.18.1.2:8083 https://www.so.com/ api_base_url: 'http://192.168.1.12:8083', // api_base_url:"https://www.baidu.com", img_base_url: '' } export { config } 2.封装http请求http.js: import { config } from './con

微信小程序HTTP接口请求封装

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回调

微信小程序:POST请求data数据请求不到

最近开始开发小程序,遇到许多小问题,直奔主题. wx.request()是微信封装的ajax请求方法,也是小程序中ajax唯一的一个方法,被放在了API文档的第一个位置,的确使用率是最高的. 但是wx.request()并非像jquery中的$.ajax()一样,它还需要开发者在具体情况中做一些调整. 在直接发送POST请求时,请求成功,可以触发success回调,但是请求到的数据为空.这其中的问题出在https请求的header上.(上图为header未设置时的情况) 当把请求header的c

微信小程序封装bindinput & 输入框出现清空图标 & wx:key对input的影响

Q:我以前写小程序每次获取输入内容,都要写一个方法,觉得十分麻烦,所以写了一个通用的方法. A:我能想到的原理就是,不同的input所带的data不同,bindinput事件setData不同的data. <input class="weui-input" data-inputName='name' placeholder="你的姓名" bindinput="bindKeyInput" value='{{item}}' bindfocus=

微信小程序封装自定义弹窗

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

微信小程序设置全局请求URL 封装wx.request请求

app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(method, url, data, callback, errFun) { wx.request({ url: url,

微信小程序封装请求接口

var rootDocment = 'https://123.com';//你的域名 function postData(url, data, cb) { wx.request({ url: rootDocment + url, data: data, method: 'post', success: function (res) { return typeof cb == "function" && cb(res) }, fail: function () { ret