微信小程序封装request请求

目录

1、封装的必要性

1.1封装的原则

1.2微信小程序封装遇到的问题

1.3改进封装，使得能对拿到的结果进行不同的处理

 1.4最终调用

结束语

---

1、封装的必要性

在编写前端代码时，最离不开的就是发送网络请求了，但在发送网络请求时，许多内容都是重复使用的。会造成代码的冗余，例如，我们在网络请求失败的时候，可能都是只需要提示一下请求失败就好了。

1.1封装的原则

我们在封装时，把各个请求相同的部分进行封装就好了，不同的地方要保留住。例如，我们对于各个请求成功后，可能会根据返回的数据进行不同的处理，此时就需要保留请求成功后的数据处理能力。

1.2微信小程序封装遇到的问题

首先，我们先看看我最开始的封装

//工具类
class tool{
  //检查登入状态，只返回是否登入
  checkLogin(){
    var login=wx.getStorageSync('loginRole')
    if(login==""){
      return false
    } else {
      return true
    }
  }
  //发起网络请求
  getRequest(url,params){
    var result
    wx.showLoading({  // 请求提示
      title: '加载中...',
    })
    wx.request({
      url: "http://192.168.10.13:8081/" + url,  // 请求url地址
      data: params.data || {},  // 请求参数
      header: params.header || {},  // 请求头
      method: params.method || 'GET', // 请求方式
      dataType: 'json', // 返回数据类型
      success:(res)=>{
        this.result=res
      },
      fail: (err)=> { 
        wx.hideLoading(); 
        wx.showToast({  // 提示错误信息
          title: '网络错误',
          icon:'error'
        })
      }
    })
    return result
  }
}
export {tool}

 我将request请求封装在了一个工具类之中，并希望在请求成功后，能将结果返回，不成功则返回一个未定义。然而真正运行的时候你会发现，无论是否成功都返回的是未定义。这是因为success与fail都是回调函数，既先完成外面的函数后，再回过头来执行这两个函数的其中一个。也就是说，return result要先于this.result=res执行。这一点非常重要，也就意味着，我们的res的值还没赋值给result呢，它就直接返回了。

1.3改进封装，使得能对拿到的结果进行不同的处理

仔细想一想，其实我们的最终目的是要对不同的结果进行不同的处理，那我们也不一定要把这个结果拿到来再进行处理。可以直接将不同的处理逻辑——函数作为一个参数传入。因此就有了以下的改进。

​
//工具类
class tool{
  //检查登入状态，只返回是否登入
  checkLogin(){
    var login=wx.getStorageSync('loginRole')
    if(login==""){
      return false
    } else {
      return true
    }
  }
  //发起网络请求
  getRequest(url,params,success){
    wx.showLoading({  // 请求提示
      title: '加载中...',
    })
    wx.request({
      url: "http://192.168.10.13:8081/" + url,  // 请求url地址
      data: params.data || {},  // 请求参数
      header: params.header || {},  // 请求头
      method: params.method || 'GET', // 请求方式
      dataType: 'json', // 返回数据类型
      success:success,
      fail: (err)=> { 
        wx.hideLoading(); 
        wx.showToast({  // 提示错误信息
          title: '网络错误',
          icon:'error'
        })
      }
    })
  }
}
export {tool}

​

改进后我们发现，sucess函数不再是写死的了，我们在调用这个request时，就可以根据不同的需求，对res进行不同的操作了。

 1.4最终调用

​
new tool().getRequest('user/login',params,(res)=> { 
        wx.hideLoading(); // 关闭请求提示
        console.log(res)
      })

​

这里我只是进行的输出，开始时大家根据不同的需求进行不同的处理就可以了。话说回来，这个封装怎么感觉有点面向切面编程的思想在里面呢！

结束语

给个点赞吧，谢谢了！！！