三、封装小程序的数据请求

(1)在根目录创建utils目录,创建config.js、base.js

(2)在config.js中创建config类,并将请求路径配置给config的属性restUrl,并export

class Config {
constructor () {}
} Config.restUrl = 'http://***.cn/api/v1/' export { Config }

(3)在base.js中引入config,把url赋值给base的属性

import { Config } from 'config.js'

class Base {
constructor() {
this.baseRequestUrl = Config.restUrl
}
}

在 class Base 中封装request方法,只接受一个param 参数

request(params) {
var url = this.baseRequestUrl + params.url
if (!params.type) {
params.type = 'GET'
}
wx.request({
url: url,
data: params.data,
header: {
'content-type':'application/json',
'token': wx.getStorageSync('token')
},
method: params.type,
success: function (res) {
params.sCallback && params.sCallback(res.data)
},
fail: function (err) { },
complete: function (res) { },
})
}

(4)在页面的 index.js 中,构建好params的结构后,直接调用Base.request(params),例如

    var params = {
url: 'banner/' + id,
method: 'GET',
sCallback:
      (res) => {
        //数据绑定
        this.setData({
         'bannerArr': res[0].item
     })
      }
   }
this.request(params)
 

  

wx小程序知识点(三)的更多相关文章

  1. wx小程序知识点(二)

    二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成 不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样 ...

  2. wx小程序知识点(八)

    八.小程序的优劣势 优势:   ① 不需要下载 ② 打开速度快 ③ 开发成本低 ④ 安卓上可以添加在桌面,与原生 App 相似 ⑤ 小程序的发布审查流程比较严格,安全保障 劣势:   ① 页面大小不能 ...

  3. wx小程序知识点(七)

    七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...

  4. wx小程序知识点(六)

    六.生命周期 (1)onLoad    —— 加载时触发,只调用一次,可用来发送请求绑定数据.获取url中参数 (2)onShow   —— 页面显示时触发,每次显示都会执行,用来获取需要频繁更新的数 ...

  5. wx小程序知识点(五)

    五.双向绑定和 vue 的区别 ① vue 中实现双向绑定只需要修改 this.data var vm = new Vue({ el: '#example', data: { message: 'He ...

  6. wx小程序知识点(一)

    一.微信小程序中的目录及文件 (1)project.config.json 用于开发者工具配置 主要用于设置项目是否开启https校验(setting.urlCheck) (2) App.js 设置全 ...

  7. wx小程序知识点(四)

    四.页面间数据传递 和 参数传值 (1)页面间数据传递 ① 全局变量 ② 页面跳转或重定向时使用url携带参数(wx.navigateTo(urlStr)) ③ 使用组件模板 template < ...

  8. wx小程序获取用户位置信息

    wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...

  9. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

随机推荐

  1. [转帖]Linux查找文件6个高效工具

    Linux查找文件6个高效工具 https://www.linuxrumen.com/rmxx/176.html 需要实操 -inname -type 等等. 1. 前言 我们使用Linux过程中,经 ...

  2. Clion 常用功能

    1.创建新文件并加入项目 打开CMakeList.txt,加入这样的一段话,随后点击图中的Reload changes add_executable(项目名 文件名) 2.文件重命名,移动,复制,移除 ...

  3. BugkuCTF--never give up

    这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...

  4. 错误:编码GBK的不可映射字符解决办法

    今天在cmd测试java代码的时候遇到了一个错误 解决办法: 输入javac  -encoding utf-8  文件名.java  原因: 由于JDK是国际版的,我们在用javac编译时,编译程序首 ...

  5. Java 子类继承父类成员中的问题

    之前搞错了,变量没有“重写”一说,只有方法才能被“重写”.如果我们在子类中声明了一个和父类中一样的变量,那么实际的情况是,子类的内存堆中会有类型和名字都相同的两个变量. 现在考虑一种情况,如下所示,我 ...

  6. Eclipse使用github并开启命令行

    1. 安装EGit插件 2. 导入git项目 选择Import: 选择“Clone URI” 输入想要导入的git项目地址和用户名密码: 选择代码分支: 一路点击next完成导入github项目即可. ...

  7. Linux shellcode sample

    Linux shellcode sample HelloWorld.nasm ;HelloWorld.asm ;Author: Kul Subedi global _start section .te ...

  8. 关于解决SpringDataJpa框架实体类表字段创建顺序与数据库表字段展示顺序不一致的问题

    今天在公司的项目开发中,遇到一个问题: 后端对象实体类中写入字段顺序与数据库中的存储顺序不一致. 仔细观察到数据库中的表字段的排序方式是按照拼音字母的顺序abcdef......来存储的 而我的实体类 ...

  9. Vue的nextTick是什么?

    公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...

  10. python 短信邮件

    短信邮件 hashlib​- md5:非对称加密,不可逆的,经常用于加密密码然后存储​- 示例:​ ```python import hashlib ​ # 创建hash对象,可以指定需要加密的字符串 ...