mpvue学习笔记-之微信数据请求封装

2018-06-14 admin

20180531152773555924152.png

简介

美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它。

看了微信官方的数据请求模块–request,对比了下get和post请求的代码,发现如果在每一个地方都用request的话,那会有很多代码是冗余的,于是就准备自己封装一个,下面就记录一下封装过程。注释也写在下面的代码里了。

实现的结果

  • 代码要简洁
  • 无需每个页面引入一次
  • Promise化,避免回调地狱

封装代码

//src/utils/net.js
import wx from 'wx';//引用微信小程序wx对象
import { bmobConfig } from '../config/bmob';//bmob配置文件

const net = {
  get(url, data) {
    wx.showLoading({
      title: '加载中',//数据请求前loading,提高用户体验
    })
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data,
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'X-Bmob-Application-Id': bmobConfig.applicationId,
          'X-Bmob-REST-API-Key': bmobConfig.restApiKey,
          'Content-Type': 'application/json'
        }, // 设置请求的 header
        success: function (res) {
          // success
          wx.hideLoading();
          if(res.statusCode!=200){
            wx.showToast({
              title: "网络出错,稍后再试",
              icon: "none"
            });
            return false;
          }
          resolve(res.data);
        },
        fail: function (error) {
          // fail
          wx.hideLoading();
          reject(error);//请求失败
        },
        complete: function () {
          wx.hideLoading();
          // complete
        }
      })
    })
  },
  post(url, data) {
    wx.showLoading({
      title: '加载中',
    })
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data,
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'X-Bmob-Application-Id': bmobConfig.applicationId,
          'X-Bmob-REST-API-Key': bmobConfig.restApiKey,
          'Content-Type': 'application/json'
        }, // 设置请求的 header
        success: function (res) {
          // success
          wx.hideLoading();
          resolve(res.data);
        },
        fail: function (error) {
          // fail
          wx.hideLoading();
          reject(error);
        },
        complete: function () {
          // complete
          wx.hideLoading();
        }
      })
    })
  }
}

export default net;//暴露出来供其他文件引用

使用方法

// src/main.js
import Vue from 'vue';
import App from '@/App';
import MpvueRouterPatch from 'mpvue-router-patch';
import net from '@/utils/net';//导入封装好的net

import shareConfig from '@/config/share';

Vue.prototype.$net=net;//微信小程序网络请求的配置

Vue.config.productionTip = false
Vue.use(MpvueRouterPatch)

const app = new Vue({
  ...App
})
app.$mount()

export default {
  //省略coding
}

  • 发送请求实例,第一步已经全局配置了net,使用时直接用this.$net即可使用net的方法(get/post)
// src/pages/home/index.vue
<template>
<!--省略coding-->
</template>
<script>
export default {
data() {
    return {}
      bannerList:[],
      navList:[],
      newsitems:[],
      about:"",
      applay:false, 
    }
},
onLoad () {
    this.getData();
},
methods:{
    async getData(){
    //注意方法名之前一定要加上异步async
      this.bannerList=[];
      let bannerList = await this.$net.get(this.$apis.bannerList,{});
      let newsitems = await this.$net.get(this.$apis.article,{});//请求数据前面要加上await,是与async配套使用
      let aboutus = await this.$net.get(this.$apis.aboutus,{});
      let isApplay = await this.$net.get(this.$apis.datadict+'/kMiCYYYg',{});
      // console.log(isApplay);
      if(isApplay.remark1=='1'){
        this.applay = true;
      }
      this.newsitems = newsitems.results;
      // this.bannerList = bannerList.results;
      bannerList.results.forEach(el => {
        if(el.is_open==1){
          this.bannerList.push(el);
        }
      });
      this.about = aboutus.results[1].desc;
      // console.log(aboutus)
    },
}
</script>
<style>
/*
省略样式coding
**/
</style>

总结

这次对微信数据请求的封装过程中学习了一下Promise,使得代码更简洁了。踩了一些坑:比如说async一定要与await配套使用,数据请求前要加上异步async。

这里贴一下Promise的技术贴以留后用:

原文链接:https://segmentfault.com/a/1190000015286969

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34033.html

文章标题:mpvue学习笔记-之微信数据请求封装

相关文章
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
回到顶部