小程序封装wx.request请求并创建接口管理文件的实现

开发小程序，封装有一个简单易用wx.request请求还是很必要的，可以省去大量的维护成本！闲话不多说，直接撸代码。

流程

  • 创建http.js文件，封装wx.request
  • 创建api.js文件，统一管理所有接口
  • 在index.js中调用接口

创建http.js文件，封装wx.request

在utils中创建http.js文件，封装http，代码如下：

module.exports = {
 http(url, method, params) {
  let token = 'token' // 获取token，自行获取token和签名，token和签名表示每个接口都要发送的数据
  let sign = 'sign' // 获取签名
  let data = {
    token,
    sign
  }
  if(params.data){ // 在这里判断一下data是否存在，params表示前端需要传递的数据，params是一个对象，有三组键值对，data：表示请求要发送的数据，success：成功的回调，fail：失败的回调，这三个字段可缺可无，其余字段会忽略
   for (let key in params.data) { // 在这里判断传过来的参数值为null，就删除这个属性
    if (params.data[key] == null || params.data[key] == 'null') {
     delete params.data[key]
    }
   }
   data = {...data,...params.data}
  }
  wx.request({
   url:'https://www.apiopen.top'+url, // 就是拼接上前缀,此接口域名是开放接口，可访问
   method:method=='post'?'post':'get', // 判断请求类型，除了值等于'post'外，其余值均视作get
   data,
   header: {
    'content-type': 'application/json'
   },
   success(res) {
    params.success&&params.success(res.data)
   },
   fail(err) {
    params.fail&&params.fail(err)
   }
  })
 }
}

代码很简单，需要说的是在逻辑代码中只需要传递params，而url和method在接口文件中传递，方便统一管理

创建api.js文件，统一管理所有接口

在utils下创建api.js文件，作为接口管理文件，代码如下：

// 在这里面定义所有接口，一个文件管理所有接口，易于维护
import {http} from './http'; // 引入刚刚封装好的http模块，import属于ES6的语法，微信开发者工具必须打开ES6转ES5选项

function femaleNameApi(params){ // 请求随机古诗词接口
 http('/femaleNameApi','get',params) // 接口请求的路由地址以及请求方法在此处传递
}

// 每一个接口定义一个函数，然后暴露出去，供逻辑代码调用

function novelApi(params){ // 小说推荐接口
 http('/novelApi','get',params)
}

export default { // 暴露接口
 femaleNameApi,
 novelApi
}

用api.js文件统一管理的好处就是，当接口更新后修改很方便，不需要看逻辑代码，也不用关心有几处调用了此接口，直接在app.js中修改响应就行了，接口统一管理是非常有必要的

在index.js中调用接口

调用方式，代码如下

import http from '../utils/api' // 引入api接口管理文件
Page({
 data: {
  femaleList:[]
 },
 onLoad: function () {
  http.femaleNameApi({ // 调用接口，传入参数
   data:{
    page:1
   },
   success:res=>{
    console.log('接口请求成功',res)
    this.setData({
     femaleList:res.data
    })
   },
   fail:err=>{
    console.log(err)
   }
  })
 }
})

参数传入说明:

  • 为了和微信的API接口调用方式看起来一致，故采用了微信API的这种调用方式
  • 传递一个对象，对象有三组键值对，data：表示要发送的数据，success：成功回调，fail：失败回调
  • 三个键值对均可传可不传，其余值会忽略，基本和微信API调用方式一致，减少了强迫症的烦恼

小程序代码片段放在github上了，欢迎issue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 wx.request(OBJECT)发起请求详解

    微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , header中不能设置Referer method String 否 默认为GET,有效值:OPTIONS,GET,H

  • 微信小程序 wx.request合法域名配置详解

    微信小程序 wx.request合法域名配置详解

    微信小程序  wx.request合法域名配置 加上了appid,麻烦事就来了. 问题:xxx不在以下合法域名列表中 ,请参考文档 解决方法:去微信公众平台配置域名. 注意: 1.一个月申请修改的次数3次,且行且珍惜.我这个月只有一次机会了. 2.必须是HTTPS. HTTPS  SSL证书 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 微信小程序 wx.request(object) API详解及实例代码

    微信小程序 wx.request(object) API详解及实例代码

    这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 定位到asdebug.js文件 打开搜索关键字URL 域名不合法关键字就是提示错误信息注释两行代码 主要方法: wxml <block wx:for-items="{{result}}"> <view style="width:100%; height: 50rpx"></view>

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

  • 微信小程序wx.request实现后台数据交互功能分析

    本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log

  • 微信小程序 wx.request方法的异步封装实例详解

    wx-promise-request 是对微信小程序 wx.request 方法的异步封装. 解决问题 支持 Promise (使用 es6-promise 库). 管理请求队列,解决 request 最大并发数超过 10 会报错的问题. 下载 npm install wx-promise-request 然后拷贝 dist/index.js 文件到你的小程序项目中. 使用 import {request} from './wx-promise-request'; request({ url:

  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

  • 微信小程序设置全局请求URL及封装wx.request请求操作示例

    本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作.分享给大家供大家参考,具体如下: app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(metho

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • 小程序封装wx.request请求并创建接口管理文件的实现

    开发小程序,封装有一个简单易用wx.request请求还是很必要的,可以省去大量的维护成本!闲话不多说,直接撸代码. 流程 创建http.js文件,封装wx.request 创建api.js文件,统一管理所有接口 在index.js中调用接口 创建http.js文件,封装wx.request 在utils中创建http.js文件,封装http,代码如下: module.exports = { http(url, method, params) { let token = 'token' // 获

  • 微信小程序封装的HTTP请求示例【附升级版】

    本文实例讲述了微信小程序封装的HTTP请求.分享给大家供大家参考,具体如下: 微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装. 在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例. 废话不多说,先上代码: //全局对象httpClient httpClient:{ request:function(method,url,data){ //返回一个promise实例 return new Prom

  • 微信小程序 封装http请求实例详解

    微信小程序 封装http请求 最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112 下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (ur

  • promise封装wx.request的方法

    promise封装wx.request的方法

    上篇文章给大家介绍了使用Promise封装小程序wx.request的实现方法,本文重点给大家介绍promise封装wx.request的方法,具体内容如下所示: 为什么要封装wx.request? 因为我们请求接口时,有时候会请求一个接口的多个api,如果没有使用封装,那么我们编写代码会变得繁琐,并且也会导致性能问题. 封装的话,利于我们编写,并且提高用户体验和便于代码的修改. 对于封装的选择为什么使用promise? 当我们进行微信小程序的编写时,写到wx.request的时候,我想大家一定

  • 微信小程序封装http访问网络库实例代码

    微信小程序封装http访问网络库实例代码 之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 代码如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(

  • 微信小程序 网络API发起请求详解

    微信小程序 网络API: 微信小程序 网络API发起请求 微信小程序 网络API 上传.下载 微信小程序 网络API Websocket 微信小程序 wx.request(OBJECT) ​ wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , hea

  • 微信小程序出现wx.getLocation再次授权问题的解决方法分析

    微信小程序出现wx.getLocation再次授权问题的解决方法分析

    本文实例讲述了微信小程序出现wx.getLocation再次授权问题的解决方法.分享给大家供大家参考,具体如下: 首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) { wx.getLocation({ type: 'wgs84', success: function (res) { // 经纬度 var latitude = res.latitude var longitude = res.longitude var a

  • 微信小程序封装自定义弹窗的实现代码

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

随机推荐