• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

 

 

 

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); // }}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
web api对接小程序基本签名认证发布时间:2022-07-18
下一篇:
小程序配置概述发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap