小程序封装 wx.request技巧与使用

小程序开发，避不开 wx.request请求。为了提高我们的工作效率，我们对 他进行封装，使代码更加优雅，易读

1 先了解官方的文档

1.1重要参数

• url 请求地址
• method 请求方式(目前关注 Get/Post)
• data 请求的参数
• header 请求头(常用放token之类)
• success 接口调用成功的回调函数
• fail 接口调用失败的回调函数

1.2 重要例子

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

2 开始封装

const request = (url, options) => { 内容... }             //第1种
const request = function(url, options) {内容...}      //第2种

return new Promise(function (resolve, reject) { 内容... })  //第1种
 return new Promise((resolve, reject)=> { 内容...})           //第2种

新建 request.js 目前就放在 utils 文件夹里面

/**
 * request.js 封装一个Pominse风格的同样请求
 * url        请求地址
 * options    包含请求方式method，请求参数的配置对象data
 */
var app = getApp(); //引入全局变量
const request = function(url, options) {
    return new Promise((resolve, reject)=> {
        wx.request({
            url: app.globalData.baseUrl + url,
            method: options.method,
            data: options.data,
            header: {
                'token': app.globalData.token
            },
            success: (res) => { //请求成功
                if (res.data.code == 200) { //成功
                    resolve(res.data.result);
                } else { //失败
                    wx.hideLoading();//隐藏加载提示
                    wx.showModal({
                        title: '失败',
                        cancelColor: res.data.msg,
                        showCancel: false
                    })
                    reject(res.data.msg);
                }
            },
            fail: (err) => {//请求失败
                reject(err);
            }
        })
    })
}

module.exports = {
    //封装GET方法
    get(url,data){
        return request(url,{method:"GET",data})
    },
    //封装POST方法
    post(url,data){
        return request(url,{method:"POST",data})
    }
}

封装成功

3 使用

为了 方便 我们在 app.js引入方法

const request = require("./utils/request.js") //引入封装好的js文件
module.exports = {
  login(data){ // 登录
   return request.post('/learn/auth/login',data)
  }
}

然后在具体 页面使用

 const api = require("../../api") //引入同意管理的接口js