今日搜网络软件科技公司网站模板

咨询热线

18951535724
当前位置: 首页 > 网络技术百科 > 小程序百科

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

时间:2021-08-27 08:07:48人气: 作者: 小编

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

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

微信小程序封装数据API接口请求(图1)

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'  }}

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

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

微信小程序封装数据API接口请求(图2)

 (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 () {

  }})


标签:
加载中~

最新文章

热门话题

Copyright © 2002-2017 无锡今日搜网络科技有限公司 版权所有苏ICP备2021005205号-2
电 话:18951535724    手 机:18951535724   传 真:18951535724    E-mail:1097476955@qq.com
地 址:江苏省无锡市滨湖区华庄街道
苏ICP备2021005205号-2

扫一扫关注微信公众帐号


免费咨询 投诉建议
今日头条百度统计