微信小程序封装数据API接口请求

前言：为了请求接口维护起来比较方便，所以我们程序员就通常把请求地址封装到一个文件里面

 

1.首先我们要在utils文件里面创建一个config.js,当然也可以新建一个文件夹,所以看你们的习惯咯，只要路径引入对就好了。

    1)config.js文件主要是配置请求地址(域名)

//这里使用的接口呢都是自己模拟的，亲么可以根据自己的需求进行添加
module.exports = {
  //开发环境的url
  dev: {
    baseUrl: "https://api.gdzhenglu.com"
  },
  //测试环境url
  test: {
    baseUrl: "http://www.test.com"
  },
  //线上环境url
  prod: {
    baseUrl: 'https://api.it120.cc'
  }
}

1.  在utils文件里面创建一个request.js,封装reques请求，引入config中的url(后面点什么就是 什么环境) 

   (1) 后面点什么就是(线上，测试等)环境const {baseUrl} = require('./config.js').dev;

    

        (2) 二次封装wx.request

// 引入config中的url后面点什么就是 什么环境
const {baseUrl} = require('./config.js').dev;

//在这里添加我们的专业域名（二级域名）
const subDomain = 'https://api.gdzhenglu.com';
/*
 *二次封装wx.request
 * 
 */
module.exports = {
  /**
   * 二次封装wx.request
   * {String }url:请求的接口地址
   * {String} method:请求方式 GET,POST....
   * {Object} data:要传递的参数
   * { boolean }isSubDomain:表示是否添加二级子域名 true代表添加, false代表不添加
   */
  request: (url, method, data, isSubDomain) => {
    // console.log('这是我封装的ajax请求', baseUrl);
    //这里使用ES6的写法拼接的字符串
    let _url = `${baseUrl}/${isSubDomain ? subDomain: '' }${url}`;
    // console.log(_url);
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: '正在加载',
      });
      wx.request({
        url: _url,
        data: data,
        method: method,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
        },
        success: (res) => {
          // console.log('从接口获取到的数据', res);
          let {
            code
          } = res.data;
          if (code === 0) {
            resolve(res.data);
            wx.hideLoading();
          } else {
            wx.showToast({
              title: '数据请求错误',
            })
          }
        },
        fail() {
          reject('接口有误，请检查')
        }
      });

    });
  },
}

3. 在utils文件里面创建一个api.js,封装所有的接口路径，

    (1) 引入封装的reuest请求const {request} = require('./request.js')

//引入封装的reuest请求
const {
  request
} = require('./request.js')
//基于业务封装的接口
module.exports = {

  /* 轮播图 */
  banners: () => {
    return request('banner_list', 'GET', {}, false);
  },
  neworder: () => {
    let data = {
      num: 3
    }
    return request('all_new_order', 'GET', {data}, false);
  }

  /* 封装商品列表的方法 */
  // getGoodsList:()=>{
  //   return request('要请求的路径','请求方式|GET|POST',{要携带的参数},是否添加子域名 |true|false);
  // },
  /* 添加商品收藏 */
  // addGoodsFav: (goodsId, token)=>{
  //   return request('要请求的路径', 'POST', { goodsId:goodsId, token:token},true);
  // },
  /* 获取商品的分类 */
  // getGoodsCate:()=>{
  //   return request('要请求的路径','GET',{},true);
  // }
}

4. 在index.js页面引用

    (1)在这个页面要要用到api.js那边的几个方法就引用几个方法

//在这个页面要要用到api.js那边的几个方法就引用几个方法
const {
  banners,
  neworder
} = require('../../utils/api.js')

(2) 在index页面的使用

// pages/httpName/httpName.js
//在这个页面要要用到api.js那边的几个方法就引用几个方法
const {
  banners,
  neworder
} = require('../../utils/api.js')
var app = getApp();
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.banners();
    this.getNeworder();
  },
  //轮播接口的使用
  banners() {
    banners().then(res => {
      console.log('终于等到你', res);
    })
  },
  // 最新下单者
  getNeworder() {
    neworder().then(res => {
      console.log('终于等到你', res);
    }).catch(err => {
      console.log(err)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

转自：https://mp.weixin.qq.com/s?src=11&timestamp=1622123199&ver=3094&signature=BmvOlDKDYXYFdYxUwgXdU7fwvgWbeQgm*tI8SQaLPw-rKmtlwNyagcow8P8pfwhsx48bI-QEC8MEJY02nr9eTmmfA-wEBRGv4G8Sd1nMY-*Rw6*AJO-d8ulOheUI--dw&new=1

//引入封装的reuest请求const {  request} = require('./request.js')//基于业务封装的接口module.exports = {
  /* 轮播图 */  banners: () => {    return request('banner_list', 'GET', {}, false);  },  neworder: () => {    let data = {      num: 3    }    return request('all_new_order', 'GET', {data}, false);  }
  /* 封装商品列表的方法 */  // getGoodsList:()=>{  //   return request('要请求的路径','请求方式|GET|POST',{要携带的参数},是否添加子域名 |true|false);  // },  /* 添加商品收藏 */  // addGoodsFav: (goodsId, token)=>{  //   return request('要请求的路径', 'POST', { goodsId:goodsId, token:token},true);  // },  /* 获取商品的分类 */  // getGoodsCate:()=>{  //   return request('要请求的路径','GET',{},true);  // }}