使用Promise封装wx.request()

在根目录下创建env文件,创建index.js文件并配置多个开发环境
使用Promise封装wx.request()
在index.js中配置

module.exports={
  //开发环境
  Dev:{
    "BaseUrl":"https://www.develep.com"
  },
  //测试环境
  Test:{
    "BaseUrl":"https://www.test.com"
  },
  //生产环境
  Prod:{
    "BaseUrl": "https://api.douban.com"
  }
}

在根目录下创建http文件夹,在里面创建api.js文件和fetch.js文件还有http.js文件
使用Promise封装wx.request()
在app.js中统一管理请求地址url:

module.exports={
  banner:"/home/multidata", //轮播
}

在fetch.js中使用promise对wx.request()进行封装:

//封装wx.request()网络模块
module.exports=(url,method,data)=>{
  let p=new Promise((resolve,reject)=>{
    wx.request({
      url: url,
      method:method,
      data:Object.assign({},data),
      header:{'Content-Type': 'application/text' },
      success(res){
        resolve(res)
      },
      fail(err){
        reject(err)
      }
    })
  })
  return p;
}

在http.js文件中,根据当前环境,设置相应的baseUrl,引入封装好的promise请求,设置请求体,设置对应的方法并导出。

// const evn=require('../env/index.js')
const api=require('./api')
const fetch = require('./fetch')


//确定开发环境
let baseUrl="http://123.207.32.32:8000/api/h8";
//如果接口需要token鉴权,获取token
let token=wx.getStorageSync('token');

//轮播请求函数
function banner(){
  // console.log(evn);
  return fetch(baseUrl+api.banner,'get',{})
}
//list列表函数

//分类接口函数

module.exports={
  banner
}

在全局app.js中引入http,并注册到根组件

// app.js
const http = require('./http/http.js')
App({
  http,
})

在要使用的页面引入并使用

// 获取应用实例
const app = getApp();
// pages/todolist/todolist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    app.http.banner().then((res)=>{
      console.log(res);
      let {list} = res.data.data.banner;
      console.log(list);
      this.setData({
          list:list
      })
    })
  },
})
上一篇:js操作轮播图(图片)运动起来


下一篇:Adapter模式精解(C++版本)