小程序中使用promise封装wx.request

在根目录下创建两个文件目录,一个为dev里面放我们的多环境变量,另一个为service里面放api 、request 、http 

1.1 在env的index.js中配置多环境变量

module.exports={
  "dev":{//开发环境
    "baseUrl":"https://api-hmugo-web.itheima.net/api/public/v1"
  },
  "pro":{//生产环境
    "baseUrl":"https://www.baidoapi.com/api/public/v1"
  },
  "test":{//测试环境
    "baseUrl":"https://www.test.com/api/public/v1"
  }
}

1.2 在service的api.js中放路径的后半部分

// 只放url
module.exports={
  'lunbo':'/home/swiperdata',//轮播接口
  "login":"/login",//登录接口
  'cate':"/category"//分类接口
}

 1.3 在service的request.js中配置请求方法

module.exports=function axios(url,method,data){// 地址 请求方式 参数
  return new Promise((resolve,reject)=>{//成功，失败
   wx.request({
     url: url,
     method:method,
     data:Object.assign({},data),
     success(res){
       resolve(res);
     },
     fail(err){
       reject(err)
     }
   })
  })
}

 1.4 在service的http.js封装我们的方法

// 定义各种各样的请求方法
const env=require('../env/index')//多环境变量
const api=require('./api')//url
const axios=require('./request')//请求拦截

// 根据当前环境手动选择baseUrl
const baseURL=env.dev.baseUrl;

// 定义轮播接口请求方法
function lunbo(url,method,data){
  return axios(baseURL+url,method,data)
}
// 定义登录接口请求方法  不传参
function login1(){
   return axios(baseURL+api.login,'post',{})
}
module.exports={
  lunbo,//导出轮播
  login1//导出登录
}

 1.5 在app.js中，即App头部导入http封装方法,并在下面全局定义

// app.js
const axios = require('./service/http')//导入 http封装方法
App({
  onLaunch() {
    console.log('onLaunch监听小程的初始化，全局只触发一次')
  },
  onShow(){
    console.log('onShow监听小程序的显示')
  },
  onHide(){
    console.log('onHide监听小程序隐藏')
  },
  onError(){
   console.log('onError监听小程序脚本错误')
  },
  onPageNotFound(){
   console.log('onPageNotFound监听页面不存在')
  },
  globalData: {//全局变量
    userInfo: null,
    axios//this.globalData.axios访问
  },
  axios//this.axios访问
})

 1.6 在home.js中Home头部导入app实例，并使用

// pages/home/home.js
const app=getApp();//1. 获取app实例
Page({

  data: {//页面的初始数据

  onLoad: function (options) {//生命周期函数--监听页面加载

   let that=this;//2. 使用this
   app.axios.lunbo().then(res=>{//方法1
    this.setData({swiperList:res.data.message })
  })
  //方法2 传参
   app.axios.lunbo('/home/swiperdata','get',{}).then(res=>{
      this.setData({
      swiperList:res.data.message
      })
   })
  },

})

好了,废话不多少，上图