微信小程序> 小程序request请求接口封装(常用)以及使用方法

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

浏览量:7047 时间: 来源:丁小强Panda

第一步:在小程序目录中新建一个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)})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎