小程序request请求接口封装（常用）以及使用方法

小程序request请求接口封装（常用）以及使用方法

第一步：在小程序目录中新建一个utils文件，里面在新建一个js文件用来编写封装的请求方法

第二步：封装接口

封装接口post from表单类型

function way1(url, data, cb) {

      wx.showLoading({})    //加载动画  

      wx.request({

        url: '公用域名' + url,   //域名 （据情况而定）  url为地址

        data: data,  //所需要传的参数

        header: { 

          "Content-Type": "application/x-www-form-urlencoded",   // 处理form表单的请求头

          "cache-control":"no-cache"      //处理在回调时反应慢的问题（可不写）

        },

        method: 'POST',    //方式为post

        dataType: 'json',

        responseType: 'text',

        success: function (res) {  // 请求成功后

            wx.hideLoading();  //请求成功后加载动画结束

            return typeof cb == "function" && cb(res)    // 用来判断返回的是否是函数

        },

        fail: function (res) {   //请求失败

           wx.hideLoading();

           wx.showModal({

               title: '网络错误',

               content: '网络出错，请刷新重试',

               showCancel: false

           })

           return typeof cb == "function" && cb(false)

          },

      })

}

封装接口post json类型

function way2(url, data, cb) {

      wx.showLoading({})

      wx.request({

        url: '公用域名'/' + url,

        data: data,

        header: {

          "Content-Type": "application/json;charset=UTF-8",

          "cache-control": "no-cache"

        },

        method: 'POST',

        dataType: 'json',

        responseType: 'text',

        success: function (res) {

               wx.hideLoading();

               return typeof cb == "function" && cb(res)

        },
        fail: function (res) {

               wx.hideLoading();

               wx.showModal({

               title: '网络错误',

               content: '网络出错，请刷新重试',

               showCancel: false

              })

              return typeof cb == "function" && cb(false)

         },
      })

}

封装接口get 基本都是json类型的

function way3(url, data, cb) {
    wx.showLoading({})
    wx.request({
       url: '公用域名'/' + url,
       data: data,
       header: {
         "Content-Type": "application/json;charset=UTF-8",
         "cache-control": "no-cache"
        },
        method: 'GET',
        dataType: 'json',
        responseType: 'text',
        success: function (res) {
            wx.hideLoading();
            return typeof cb == "function" && cb(res)
        },
        fail: function (res) {
            wx.hideLoading();     
            wx.showModal({
               title: '网络错误',
               content: '网络出错，请刷新重试',
               showCancel: false
               })
        return typeof cb == "function" && cb(false)
       },
   })
}

将方法暴露

module.exports = {

  method1: way1,

  method2: way2,

  method3: way3,

}

第三步：在app.js文件中引入封装好的文件（为了全局使用）

var util = require(‘utils/util.js’) //引入util.js,地址根据自己的地址填写

然后在app中配置我们的方法

 app({
     func: { //这里配置我们需要的方法
         req1: util.method1,
         req2: util.method2,
         req3: util.method3,
        },
})

第四步：使用

var app = getApp(); //引入
在Page（{}）中：

 app.func.way1('地址接口',{参数},(res)=>{console.log(res)})