• 小程序的wx.request的封装


    request.js

    此方法中已经将请求的数据data和请求头header封装了进去,默认为空

    // 封装的wx.request请求
    function request(url,method,data={},header={}){
      return new Promise(function(resolve,reject){
        wx.request({
          url: url,
          method: method,
          data:data,
          header:header,
          success:function(res){
            if(res.statusCode == 200){
              resolve(res)
            }else{
              reject('error')
            }
          },
          fail:function(e){
            reject(e)
          }
        })
      })
    }
    
    // 封装的请求方法需要暴露出去
    module.exports = {
      request: request
    }
    

     用户请求的url,统一放在app.js里面,以方便后期上线或者测试对接口进行修改

     app.js

    //app.js
    App({
      onLaunch: function () {
    
      },
      // 全局变量
      globalData: {
        userInfo: null,
    
    
      },
      // 用户的信息请求的url
      userUrl:{
        host: "http://op.juhe.cn",
    
    
      },
    
    })
    

     然后在你的页面进行页面请求,以index.js页面为例

    //获取应用实例
    const app = getApp()
    // 封装的接口请求
    const request = require('./../../utils/request.js')
    
    Page({
      data: {
    
      },
    
      onLoad: function () {
        var that = this;
        // 初始化请求
        that .getuser()
      },
        // 模拟请求
        getuser:function(){
        var uid = '1456765432'
        request.request(app.userUrl.host,'get',{
        uid:uid,
        }).then(res => {
        // 打印接口请求的结果
          console.log(res)
        },e =>{
          console.log(e)
          })
        }
    })
    

      

    模拟接口异步请求(链式调用)

    function getUserName(){
     let data = 'superman';
     return new Promise((resolve, reject) => {
     setTimeout(resolve(data), 4000);
     })
    }
    function getUser(username){
     let data = {
     id:1,
     username: 'superman',
     gender: 'male'
     }
     return new Promise((resolve, reject) => {
     if(username){
      setTimeout(resolve(data), 2000);
     }
     else{
      reject('err');
     }
     })
    }
    getUserName().then(username => {
     return getUser();
    })
    .then(user => {
     console.log(user);
    })
    .catch(err => {
     console.log(err);
    })
    

      

     

  • 相关阅读:
    9种纯CSS3人物信息卡片动态展示效果
    CSS3 animation属性 实现转动效果
    炫酷CSS3垂直时间轴特效
    css实现翻面效果
    uniapp上传图片转base64码
    经常使用的js三元表达式
    async/await 使用
    Python的OS模块批量修改文件名
    解决Tomcat对POST请求文件上传大小的限制
    HTTP 413错误解决方法
  • 原文地址:https://www.cnblogs.com/xinheng/p/12190976.html
Copyright © 2020-2023  润新知