Wechat applet request encapsulation

Preface

As long as it's the front end , No matter what framework or language , Can't avoid requesting data from the server , The following is provided by wechat applet APIwx.request

wx.request({
    
  url: 'www.baidu.com', // Just for the sample , Not a real interface address 
  data: {
    
    x: '',
    y: ''
  },
  header: {
    
    'content-type': 'application/json' //  The default value is 
  },
  success (res) {
    
    console.log(res.data)
  }
});

To improve development efficiency , Encapsulation can make the development process more lively .

Realization

Generally, it is selected under the external root directory , establish utils Folder ,utils Create under folder http.js

• utils/http.js

http.js

const baseURL = app.globalData.baseURL;  //  stay app.js Of globalData Add in baseURL

function get(url, param, callback) {
    
   // load Prompt box , You can customize 
   wx.showLoading({
    
      title: " Loading ...",
      mask: true,
   });
   wx.request({
    
      url: baseUrl + url, //  Basic routing  +  The address sent 
      data: param,
      header: {
    
         "content-type": "application/json", //  The default value is 
         openid: wx.getStorageSync('wxOpenId') //  Add in the interface openid, Be similar to token
      },
      success: function success(res) {
    
         wx.hideLoading(); //  hide load box 
         //  The following is the response interception , give an example , According to the status code given by the back end , Make a simple interception here 
         if (res.data.code == 255) {
    
            wx.showModal({
    
               content: " Need to log in ",
               success(res) {
    
                  if (res.confirm) {
    
                     wx.navigateTo({
    
                        url: "../../loginInfo/login/login",
                     });
                  } else if (res.cancel) {
    
                     wx.navigateBack();
                  }
               },
            });
         } else {
    
            //  Callback after success 
            callback(res.data);
         }
      },
   });
}

//  and get Empathy 
function post(url, param, callback) {
    
   wx.showLoading({
    
      title: " Loading ...",
      mask: true,
   });
   wx.request({
    
      url: baseUrl + url, // Just for the sample , Not a real interface address 
      data: param,
      method: "POST",
      header: {
    
         "content-type": "application/json", //  The default value is 
         openid: wx.getStorageSync('wxOpenId')
      },
      success: function success(res) {
    
         wx.hideLoading();
         if (res.data.code == 255) {
    
            wx.showModal({
    
               content: " Need to log in ",
               success(res) {
    
                  if (res.confirm) {
    
                     wx.navigateTo({
    
                        url: "../../loginInfo/login/login",
                     });
                  } else if (res.cancel) {
    
                     wx.navigateBack();
                  }
               },
            });
         } else {
    
            callback(res.data);
         }
      },
   });
}

//  Get page path 
function getUrl() {
    
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
   const url = `/${
      currentPage.route}`;
   console.log(url);
   wx.setStorage({
    
      key: "Url",
      data: url,
   });
}

module.exports = {
    
   get,
   post,
   getUrl
};

• Usually used more mainly or get and post, So it encapsulates two , If there are more , You can extract the contents separately , Then define put、delete Other methods
• Or directly add the fourth formal parameter , The default is for get, It's just that it's more troublesome , Every request is not get All interfaces have to pass parameters once , Look at their needs

app.js

stay app.js Data defined in , It's kind of like config.js The feeling of , Configure online address , Local address , And the address of the picture mosaic

globalData: {
    
    baseUrl: 'https://xxx.com/api/', //  on-line 
    //baseUrl: 'http://xxx.com/api/', //  Local 
    imgUrl: 'https://xxx.com/img/', //  Picture splicing address 
}

The actual use

stay app.js The head of

var http = require("utils/http.js");

App({
    
   http,
   showToast(title) {
    
      wx.showToast({
    
         title: title,
         icon: "none",
         duration: 2000,
         mask: true,
      });
   },
   globalData: {
    
      baseUrl: 'https://xxx.com/api/', //  on-line 
      //baseUrl: 'http://xxx.com/api/', //  Local 
      imgUrl: 'https://xxx.com/img/', //  Picture splicing address 
   }
   
});

Use... On the page

const app = getApp();

Page({
    
   /** *  Initial data of the page  */
   data: {
    
      bannerList: [],
   },
    
   /** *  Life cycle function -- Monitor page loading  */
   onLoad: function (options) {
         
      this.getBanner();
   },
   
    /** *  Get the carousel  */
   getBanner() {
    
       app.http.get("banner/getList", {
    }, (res) => {
    
           if (res.code == 1) {
    
               //  Look at the picture returned from the back end , Some may need to splice their own paths 
               res.data.forEach((val, index) => {
    
                   val.image = app.globalData.imgUrl + val.image;
               });
               this.setData({
    
                   cuList: res.data,
               });
           } else {
    
               console.log(res.msg);
           }
       });
   },
  
});