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


Posted in Javascript onApril 29, 2019

开发小程序,封装有一个简单易用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&¶ms.success(res.data)
   },
   fail(err) {
    params.fail&¶ms.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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python try...finally...的实现方法
2020/11/25 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
教育项目合作协议书格式
2014/10/17 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS