zoukankan      html  css  js  c++  java
  • 封装数据请求

    1: 创建api.js
    const api = {
        top: 'https://api.douban.com/v2/movie/top250',
         detail: 'https://api.douban.com/v2/movie/subject/',
         hot: 'https://api.douban.com/v2/movie/in_theaters',
         search: 'https://api.douban.com/v2/movie/search'
    }
    module.exports = api;
    2: 在app.js中创建封装请求数据的方法
    const conf = {
     
        // 全局数据对象与方法(整个应用程序共享)
     
        globalData: {
            hasLogin: false,
        }, 
     
        fetch(url,data, callback) {
            wx.request({
                url,
                data: data,
                header: {
                    'Content-Type': 'application/json'
                },
                success(res) {
                    callback(null, res.data);
                },
                fail(e) {
                    callback(e);
                }
            })
        },
     
        // 程序启动时触发一次
        onLaunch() {
            console.log('App Launch');
        },
     
        // 当程序进入前台状态时触发
        onShow() {
            console.log('App Show');
        },
     
        // 当程序进入后台状态时触发
        onHide() {
            console.log('App Hide');
        }
    };
     
    // App() 函数创建应用程序对象
    App(conf);
    3: 在子页面中调用封装的方法请求数据
    import API from "../../api/api.js";
    const app = getApp();
    const conf = {
        data:{
            title:'正在拼命加载中...',
            movies:[],
            loadding:true
        },
        onLoad (){
            app.fetch(API.hot,{},(err,data) => {
                 this.setData({
                     title:data.title,
                     movies: data.subjects,
                     loading: false
                 })
            })
        },
        onReady(){
            wx.setNavigationBarTitle({
              title: '热映',
            });
        }
    };
    Page(conf);
    4: 带参数请求数据
     //上拉加载更多数据
        downLoad:function(e) {
            var self = this,
                nextPage = self.data.nextPage,
                category = self.data.category,
                tabIndex = self.data.tabIndex,
                tipShow  = self.data.tipShow,
                pageIndex = Number(self.data.pageIndex),
                data = {
                      nextPage : nextPage,
                            ti : tabIndex,
                            ft : category,
                          page : pageIndex 
                  };
             if(!tipShow) {   //判断是否有更多数据
                app.requestData(API.listPage,data,(err, data) => {
                        if(data != null) {
                                var resData = data.lst,
                                   nextPage = JSON.stringify(data.nextPage);
                                self.setData({
                                    pageIndex : pageIndex + 1,
                                     nextPage : nextPage,
                                         list : self.data.list.concat(self.dataRead(resData))
                                });
                        } else {
                                 self.setData({
                                 tipShow : true
                             });
                        }
                 });
             }   
        },
     
  • 相关阅读:
    一次性解决window系统下,git日志乱码的问题
    多线程之线程状态,状态切换种类及代码实例
    mybatis 第一个demo,并记一次解决问题:Mapped Statements collection does not contain value for
    有100盏灯,分别写上编号1~100,同样地 有100个开关,写上编号1~100。当我按1号开关,写上1的倍数的灯会开/关(如果灯开着就关,相反地,关着就会开),当我按2号开关,写上2的倍数的灯会开/关,如此类推
    阿里云云服务器 centos 7.4 安装mysql 过程记录
    java实现树形输出
    MATLAB入门笔记
    经测试稳定可用的蓝牙链接通信Demo,记录过程中遇到的问题的思考和解决办法,并整理后给出一个Utils类可以简单调用来实现蓝牙功能
    View的相关原理(读书笔记)
    JAVA设计方法思考之如何实现一个方法执行完毕后自动执行下一个方法
  • 原文地址:https://www.cnblogs.com/tian-sun/p/7405827.html
Copyright © 2011-2022 走看看