【微信小程序】wx.request请求封装，超级简单

Posted 2023-03-16

参考技术A

新建文件request.js，将请求的封装方法写在里面

页面调用，在页面的js文件中引用

小程序默认请求超时时间是60秒，等待时间有点长，我们可以在app.json中进行设置

每个页面请求的时候都要引用封装，还是有点麻烦。注意到小程序页面都可以获取app.js的实例（const app = getApp()），所以可以改一下封装，将封装方法直接暴露出去，在app.js中再配置POST/GET等请求；请求的url也可以抽出来写在一起，方便查找和修改。自己试一下吧~

//觉得有用的话，点个喜欢再走嘛（不要脸.jpg）

微信小程序-封装请求

在开发中,前端时常遇到请求接口返回数据,但是每一次请求接口用到的原生方法实在是太过于麻烦,所以就想封装一个微信小程序请求接口的方法(一切为了偷懒...)

　　在微信小程序种,请求接口的方法只有wx.request方法(内部参数贼多,麻烦的一批,一切为了偷懒...)

　　

wx.request({
  url: ‘test.php‘, //仅为示例，并非真实的接口地址
  data: {
    x: ‘‘,
    y: ‘‘
  },
  header: {
    ‘content-type‘: ‘application/json‘ // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

　　以上是微信开发者平台文档给出的请求方式,

　　用起来贼麻烦...

　　创建一个新文件夹来放置请求方法,(一般这类方法好像都放在utils文件夹下面)

　　(开启封装模式...)

　　api.js

　　

var base="https://123.123.123.1:8080/"

function postData(url,query,callback,error){
  wx.request({
           url:base + url, 
           data:query,
           method:‘post‘,
           header:{
                ‘content-type‘:‘application/json;charset=UTF-8‘ 
           },
           success(res){
                // 此处随意发挥
                callback(res)    
          },
           fail(){
                error()
          },  
      })  
}

function getData(url,params,callback,error){
  wx.request({
       url:base + url,
       data:params, 
       method:‘get‘,
       header:{
            ‘content-type‘:‘application/json‘
       } ,
       success(res){
             callback(res)     
       }, 
       fail(){
              error()    
       } 
    })  
}    

module.exports.postData = postData;
module.exports.getData = getData;

　　js封装完毕(只封装了常用的两种方式,其他方式,emmm,反正我没用到,嘿嘿)

　　调用时只需要引入就可以了:

　　　import {postData,getData} from ‘utils/api.js‘

　　　或

　　　var req = require(‘utils/api.js‘)

　　　通过 req.postData()或req.getData()使用

　　　(当然,第一种是我在vue常用的一种方式,咱也不知道到底能不能这样用,我还没有开发过小程序一类的东西,所以一切都是臆想)

　　　然后就可以使用了(应该可以...嗯..)

本人对小程序接触不深,也没有上手过,一切为了偷懒,谁能确定我以后用不用的到...