为了减少代码量 以及方便后期的维护 ，把小程序中的request请求封装起来是很有用的

建一个和page同级的文件夹http

1.建立一个nev.js 文件 封装各个环境下的公共接口

  module.exports={
    //开发环境
    dev:{
      baseUrl:'http://127.0.0.1:8080'
    },
    //生产环境
    prod:{
      baseUrl:'https://api.it120.cc'
    },
    //测试环境
    test:{
      baseUrl:'https://api.1909A.com'
    }
  }

2.建立一个reque.js 文件 封装request核心ajax请求

  const { baseUrl } = require('./env.js').prod
  //封装ajax
  const vipUrl='专属域名'
  module.exports={
    request:function(url,method="GET",data={},isSubDomain=true) {
      let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl:''}/${url}`;
        //数据请求成功前的loading加载
       wx.showLoading({
         title: '玩命加载中',
       })
        //promise封装request
       return new Promise((resolve,reject)=>{
           wx.request({
             url: fullUrl,
             method,
             data,
             header:{
               'Content-type':'application/x-www-form-urlencoded'
             },
             success(res){
              // console.log('res::',res)
                 //数据请求成功判断
               if (res.statusCode===200 && res.data.code===0) {
                  resolve(res.data.data)
                  wx.hideLoading()
               }else {
                 wx.showToast({
                   title: '接口有问题，请检查',
                 })
                 reject('接口有问题，请检查')
               }
             },
             fail(error) {
               wx.showToast({
                 title: '数据接口有问题',
               })
               reject('数据接口有问题')
             }
           })
       })
    }
  }

3.建立api.js 封装各个接口

  const { request }=require('./request.js');

  //项目中用到的各种业务接口的封装

  module.exports={

    //商品分类接口
    goodsCate:()=> {

      return request('shop/goods/category/all','GET','',true)

    },
    //banner图接口
    getBanner:()=>{},
    //商品详情接口
    getDetail:(id)=>{

      return request('shop/goods/detail','GET',{id:id},true)
    },
    //其他接口....

  }

4.找一个一个需要接口的页面 在他对应的js 页面引入

  //通过结构赋值的方式~
  const { goodsCate, getDetail}=require('../..//http/api.js')
  Page({
        data:{
              desc:[]
        },
       onShow(e) {
          var that = this;
           goodsCate().then(res=>{
                 console.log('index.js中接收:',res)
             })
                //   let id=e.detail
            getDetail(395742).then(res=>{
                 console.log('商品详情：',res.content)
                 this.setData({
                      desc: res.content
                 })
              WxParse.wxParse('article', 'html', that.data.desc, that, 5);
          })
    }）

小程序封装request请求和vue封装axios请求的思想其实是一样的 主要都是通过promise来实现的，网络请求是项目中必不可少的，其封装的思想一定要知道的！

每天一个小知识点，一点一点的成长，加油！