微信小程序-项目案例（三）全局变量及封装网络请求

「爱情、让人受尽委屈。」 2021-09-14 11:00 292阅读 0赞

## *1：配置全局变量 （app.js 文件）* ##

App({ globalData: { requestUrl: "https://api.xxxxxx.com" // 网络接口全局变量 }
    })

先新建一个公共文件 里面可以封装公共类  
如：utils/util.js

function httpRequest(url, callBack) { 
      var _self = this;
      wx.request({
        url: url,
        data: {},
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) { 
          callBack(res.data);  // 成功后回调方法
        },
        fail: function (erro) { 
          console.log(erro)
        }
      })
    }
    
    // 导出
    module.exports = {
      httpRequest: httpRequest
    }

接下来 我们就 可以在页面中 调用网络请求方法了 ！

调用前 先引用  
var app = getApp();  
var util = require(‘../../../utils/util.js’); // 根据自己的项目路径引入  
在 onLoad 生命周期函数里 发请求

/** * 生命周期函数--监听页面加载 */
      onLoad: function (options) {
        // 提示 数据加载中 
        wx.showLoading({
          title: '加载中',
        })
    
        // 后面是拼接的 url 参数
        var dataUrl = app.globalData.httpRequest + "xxxxx"; 
        util.httpRequest(dataUrl, _self.backData)
      }

backData()这个方法 是请求成功后 回调后的数据处理 ， 这个方法大家可以先忽略，后续我会继续更新 ！

最后数据请求成功后 ， 我们要关闭 加载中提示

if (this.data.movies.length != 0 ){
       setTimeout(function () { 
         wx.hideLoading()
       })
     }

movies 为数据返回后的集合 ，判断这个是否为 0 ，当不等于 0 时 ，说明接口已经请求成功 返回数据了，这个时候 我们就可以关闭 ，提示了 ！