小程序封装接口请求

Posted 日升月恒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序封装接口请求相关的知识,希望对你有一定的参考价值。

config.js里引入封装接口

/**
 * 小程序配置文件
 */
// 此处主机域名是腾讯云解决方案分配的域名
// var HOST_TEST1 = "https://icpmotes/mobile"//测试环境:
var HOST_TEST1 = "https://wxwx.com:443/api-test-xiaop/virtualcurrency-manage-wx"; //本地环境

var HOST_TEST2 = "https://wxwx.com:443/api-test/virtualcurrency-manage-wx"; //测试环境

var HOST_TEST3 = "https://wxwx.com:443/api/virtualcurrency-manage-wx"; //生产环境

var HOST = HOST_TEST1;
let wxContext = "virtualcurrency-manage-wx"

var config = {
    //*ICP计划运营小程序接口*
    // userLogin: `${HOST}/member/login.htm`,//用户登录
    userLogin: `${HOST}/account/login`,//用户登录
    checkAccount: `${HOST}/account/checkAccount`,//切换账户


    userCheck: `${HOST}/member/check.htm`,//权限验证
    myNodeData: `${HOST}/node/data.htm`,//我的节点
    



    goBackH: function () {// 返回上一页
      let timer = setTimeout(function () {
        let pages = getCurrentPages();//页面栈
        let currPage = pages[pages.length - 1];   //当前页面
        let prevPage = pages[pages.length - 2];  //上一个页面
        wx.navigateBack({
          delta: 1
        })
      }, 2000)
    },
    goBack: function () {// 返回上一页并刷新上一页数据
      let timer = setTimeout(function () {
          let pages = getCurrentPages();//页面栈
          let currPage = pages[pages.length - 1];   //当前页面
          let prevPage = pages[pages.length - 2];  //上一个页面
          prevPage.upPageData();//直接调用上一个页面的方法刷新
          wx.navigateBack({
            delta: 1
          })
      }, 2000)
    },
    upLoadPerPage: function () {//不返回上一页 但是刷新上一页
      let pages = getCurrentPages();//页面栈
      let currPage = pages[pages.length - 1];   //当前页面
      let prevPage = pages[pages.length - 2];  //上一个页面
      prevPage.upPageData();//直接调用上一个页面的方法刷新
    }
};
module.exports = config

  

http.js页面封装请求

const request = {
  buildHeader(){
    return {
      ‘content-type‘: ‘application/x-www-form-urlencoded‘
    };
  },
  // 将接口参数和公共参数合并
  buildParams(params) {
    // const uToken = wx.getStorageSync(‘uToken‘);
    const baseParams = {
      // uToken: wx.getStorageSync(‘uToken‘) // 系统分配的用户ID 
      accountId: wx.getStorageSync(‘virtualUserID‘) || null
    };
    return Object.assign({}, baseParams, params);
  },
  // 普通post请求
  post(url, params, isToken = false) {
    // isToken 登录接口不需要uToken
    const header = this.buildHeader();
    // const data = params;
    const data = isToken ? params : this.buildParams(params);
    // console.log(‘url‘,url,data)
    wx.showLoading({
      title: ‘加载中‘,
    })
    return new Promise((resolve, reject) => {
      wx.request({
        url: isToken ? url : `${url}?uToken=${wx.getStorageSync(‘uToken‘)}`,
        method: ‘POST‘,
        data,
        // header,
        success(res) {
          // console.log(‘request-promise‘, res);
          if(res.statusCode === 200) {
            if(res.data.returnResult !== 200) {
              wx.showToast({
                title: (res.data.returnModelInfo || {}).message || res.data.returnDetail || ‘服务器内部错误‘,
                icon: ‘none‘,
                duration: 2000
              })
            }
            resolve(res.data);
          } else {
            reject(res.errMsg);
          }
          wx.hideLoading();
        },
        fail(error) {
          // console.log(‘error‘,error)
          wx.showToast({
            title: ‘服务器内部错误‘,
            icon: ‘none‘,
            duration: 1500
          })
          reject(error);
        },
        complete() {
          // setTimeout(() => {
          //   wx.hideLoading();
          // },1000)
        }
      })
    })
  }
};

export default request;

 

//app.js  绑定到实例上

import request from ‘./https/request-promise‘;
const config = require(‘./config‘);

App({
  onLaunch: function () {
    const originalPage = Page;
    // console.log(‘Page‘,Page)
    Page = function(pageObj) {
      pageObj.$request = request;
      pageObj.$config = config;
      return originalPage(pageObj);
    };
    this.$request = request;
    this.$config = config;
  }
})
页面调用接口

const app = getApp()

// 公共的列表接口
    _requestPageListCom(url=“userLogin”, params, callback) {
      let opt = Object.assign({}, params, {
        pageData: {
          pageNo: this.data.pageNo,  //页码
          pageSize: 10  //每页请求的条数
        },
      })
      app.$request.post(app.$config[url], opt).then(res => {
        if (res.returnResult === 200) {
          const oldList = this.data.list
          const newGoodsList = res.returnData.data
          const nList = [...oldList, ...newGoodsList]
          let newData = {}; //新变更数据
          for(let i in nList){
            newData[‘list[‘+i+‘]‘] = nList[i]
          }
          this.setData(newData);//赋值列表数据
          this.setData({
            recordCount: res.returnData.recordCount
          })
          if(callback && typeof callback === ‘function‘){
            callback()
          }
        }
      })
    },

 

以上是关于小程序封装接口请求的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-封装请求

小程序封装接口请求

微信小程序封装请求接口

小程序请求接口封装函数

回归 | js实用代码片段的封装与总结(持续更新中...)

小程序封装请求的步骤