微信小程序封装请求

来源:网站建设 文章作者:dushilianren.cn 24人浏览

文章摘要:微信小程序封装请求;通过封装请求,我们可以将网络请求相关的代码抽离出来,形成一个独立的请求模块。这样,在多个页面中都可以复用这个模块,避免了代码的重复编写,提高了代码的复用性。

微信小程序封装请求

1. 封装请求的优势

在小程序开发中,我们通常需要与后端服务器进行数据交互,包括获取数据、提交表单等。封装请求的优势如下:

1.1 代码复用性

通过封装请求,我们可以将网络请求相关的代码抽离出来,形成一个独立的请求模块。这样,在多个页面中都可以复用这个模块,避免了代码的重复编写,提高了代码的复用性。

1.2 逻辑解耦

将网络请求封装成一个独立的模块,可以使代码逻辑更加清晰和简洁。不同的业务逻辑可以独立处理,降低了模块间的耦合度,提高了代码的可维护性和可测试性。

1.3 错误处理和异常捕获

封装请求的过程中,我们可以加入错误处理和异常捕获的逻辑。这样,在请求发生错误或异常时,我们可以统一处理,并给予用户友好的提示信息,提升了用户体验。

2. 封装请求的实现步骤

接下来,我们将介绍如何在微信小程序中封装请求。

2.1 封装请求方法

首先,新建一个config文件里面新建一个env.config.js 用来存不同环境的BASE_URL

然后,我们可以创建一个request.js,用于封装请求相关的方法。在该文件中,我们可以定义一个函数,用于发送网络请求。这个函数可以接受请求的参数,例如 URL、请求方法、数据等,并返回一个 Promise 对象,用于异步处理请求结果。


const envConf = {

  //本地环境

  develop: {

    mode: 'dev',

    DEBUG: false,

    VCONSOLE: true,

    appid: '换成自己的',

    VUE_APP_BASE_URL: 'https://127.0.0.1:9999',

  },

  //测试环境

  trial: {

    mode: 'dev',

    DEBUG: false,

    VCONSOLE: true,

    appid: '换成自己的',

    VUE_APP_BASE_URL: '换成自己的',

  },

  //开发环境

  release: {

    mode: 'prod',

    DEBUG: false,

    VCONSOLE: false,

    appid: '换成自己的',

    VUE_APP_BASE_URL: '换成自己的',

  }

}


module.exports = {

  env: envConf[__wxConfig.envVersion]

}


const app = getApp();

var tokenKey = "token";

//请求url;引用的是env.config.js中对应环境的

var serverUrl = env.env.VUE_APP_BASE_URL;  

var userInfo = wx.getStorageSync('userInfo');

var tenantid= '1'; //租户Id

if(!userInfo===''){

  tenantid= userInfo.relTenantIds.split(',')[0];

}

import env from '../config/env.config'

// 例外不用token的地址

var exceptionAddrArr = ['/sys/login', ];

//请求头处理函数

function CreateHeader(url, type) {

  let header = {}

  if (type == 'POST_PARAMS') {

    header = {

      'content-type': 'application/x-www-form-urlencoded',

    }

  } else {

    header = {

      'content-type': 'application/json',

    }

  }

  if (exceptionAddrArr.indexOf(url) == -1) { //排除请求的地址不需要token的地址

    let token = wx.getStorageSync(tokenKey);

    // header.Authorization = token;

    //请求头携带token还有租户id

    header['X-Access-Token'] = token; 

    header['tenant-id'] = tenantid;

  }

  return header;

}

//post请求,数据在body中

function postRequest(url, data) {

  let header = CreateHeader(url, 'POST');

  return new Promise((resolve, reject) => {

    wx.request({

      url: serverUrl + url,

      data: {

        ...data,

        tenantId: tenantid

      },

      header: header,

      method: 'POST',

      success: (res => {

        if (res.data && res.data.code === 200) {

          resolve(res)

        }

        //Token失效  跳转至登录页面

        else if (res.data.code === 401) {

          //移除失效token

          wx.removeStorageSync('token')

           //移除失效的用户信息

           wx.removeStorageSync('userInfo')

          //属于tabbar的页面,只能通过wx.switchTab来跳转

          wx.switchTab({

            url: '/pages/my/my',

          })

          console.log("TOKEN失效");

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


        } else {

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });

          reject(res)

        }

        setTimeout(_ => {

          wx.hideLoading();

        }, 500)

      }),

      fail: (res => {

        wx.hideLoading();

        console.log("err!!!!", err)

        wx.showToast({

          icon: "none",

          title: '请求失败',

        });

        reject(err)

      })

    })

  })

}

//post请求,数据按照query方式传给后端

function postParamsRequest(url, data) {

  let header = CreateHeader(url, 'POST_PARAMS');

  let useurl = url;

  console.log(useurl);

  return new Promise((resolve, reject) => {

    wx.request({

      url: serverUrl + useurl,

      header: header,

      method: 'POST',

      success: (res => {

        if (res.data && res.data.code === 200) {

          resolve(res)

        }

        //Token失效  跳转至登录页面

        else if (res.data.code === 401) {

           //移除失效的用户信息

           wx.removeStorageSync('userInfo')

          //移除失效token

          wx.removeStorageSync('token')

          //属于tabbar的页面,只能通过wx.switchTab来跳转

          wx.switchTab({

            url: '/pages/my/my',

          })

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


        } else {

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


          reject(res)

        }

        setTimeout(_ => {

          wx.hideLoading();

        }, 500)

      }),

      fail: (res => {

        wx.hideLoading();

        console.log("err!!!!", err)

        wx.showToast({

          icon: "none",

          title: '请求失败',

        });

        reject(err)

      })

    })

  })

}

//get 请求

function getRequest(url, data) {

  let header = CreateHeader(url, 'GET');

  return new Promise((resolve, reject) => {

    wx.request({

      url: serverUrl + url,

      data: data,

      header: header,

      method: 'GET',

      success: (res => {

         //统一处理响应状态码

        if ((res.data && res.data.code === 200)||res.statusCode===200) {

          resolve(res)

        } //Token失效  跳转至登录页面

        else if (res.data.code === 401) {

           //移除失效的用户信息

           wx.removeStorageSync('userInfo')

          //移除失效token

          wx.removeStorageSync('token')

          //属于tabbar的页面,只能通过wx.switchTab来跳转

          wx.switchTab({

            url: '/pages/my/my',

          })

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });

        } else {

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


          reject(res)

        }

        setTimeout(_ => {

          wx.hideLoading();

        }, 500)

      }),

      fail: (res => {

        wx.hideLoading();

        console.log("err!!!!", err)

        wx.showToast({

          icon: "none",

          title: '请求失败',

        });

        reject(err)

      })

    })

  })

}

//put请求

function putRequest(url, data) {

  let header = CreateHeader(url, 'PUT');

  return new Promise((resolve, reject) => {

    wx.request({

      url: serverUrl + url,

      data: data,

      header: header,

      method: 'PUT',

      success: (res => {

        if (res.data && res.data.code === 200) {

          resolve(res)

        } //Token失效  跳转至登录页面

        else if (res.data.code === 401) {

               //移除失效的用户信息

               wx.removeStorageSync('userInfo')

          //移除失效token

          wx.removeStorageSync('token')

     

          //属于tabbar的页面,只能通过wx.switchTab来跳转

          wx.switchTab({

            url: '/pages/my/my',

          })

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });

        } else {

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


          reject(res)

        }

        setTimeout(_ => {

          wx.hideLoading();

        }, 500)

      }),

      fail: (res => {

        wx.hideLoading();

        console.log("err!!!!", err)

        wx.showToast({

          icon: "none",

          title: '请求失败',

        });

        reject(err)

      })

    })

  })

}

//delete请求

function deleteRequest(url, data) {

  let header = CreateHeader(url, 'DELETE');

  return new Promise((resolve, reject) => {

    wx.request({

      url: serverUrl + url,

      data: data,

      header: header,

      method: 'DELETE',

      success: (res => {

        if (res.data && res.data.code === 200) {

          resolve(res)

        } //Token失效  跳转至登录页面

        else if (res.data.code === 401) {

          //移除失效token

          wx.removeStorageSync('token')

           //移除失效的用户信息

           wx.removeStorageSync('userInfo')

          //属于tabbar的页面,只能通过wx.switchTab来跳转

          wx.switchTab({

            url: '/pages/my/my',

          })

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


        } else {

          wx.showToast({

            icon: "none",

            title: (res.data && res.data.message) || "请求失败",

          });


          reject(res)

        }

        setTimeout(_ => {

          wx.hideLoading();

        }, 500)

      }),

      fail: (res => {

        wx.hideLoading();

        console.log("err!!!!", err)

        wx.showToast({

          icon: "none",

          title: '请求失败',

        });

        reject(err)

      })

    })

  })

}

module.exports.getRequest = getRequest;

module.exports.postRequest = postRequest;

module.exports.postParamsRequest = postParamsRequest;

module.exports.putRequest = putRequest;

module.exports.deleteRequest = deleteRequest;


2.2 接口管理

首先,新建一个api文件,里面新建一个login.js


import { getRequest, postRequest

}  from "../request" //引用刚刚的request

const base = '';

// 登录

export const requst_post_login = data => postRequest(`/sys/login`, data);

//查询角色权限

export const  getUserPermissionByToken= data => getRequest(`/sys/permission/getUserPermissionByToken`, data);


2.2 在小程序页面中使用封装的请求

import {

  requst_post_login,

  getUserPermissionByToken

} from "../../utils/api/login.js"


 //登录请求

  loginFun() {

  const params = {

      username: this.data.username, //用户名

      password: this.data.password,

      captcha: this.data.captcha,

      //无验证码登录

      wxLogin: "1",

    }

    requst_post_login(params).then(res => {

      if (res.data.code === 200) {

        //存储token

        wx.setStorageSync('token', res.data.result.token)

        var token = wx.getStorageSync('token');

        console.log(token);

        //存储用户信息

        wx.setStorageSync('userInfo', res.data.result.userInfo)

        // console.log(wx.getStorageSync('userInfo'));

        //存储角色信息

        wx.setStorageSync('departs', res.data.result.departs)

        this.getUserPermissionByToken();

      }

      // // 跳转首页

      wx.reLaunch({

        url: '/pages/home/home',

      });

    })

  },

————————————————

本文采摘于网络,不代表本站立场,转载联系作者并注明出处:https://www.dushilianren.cn/appnews/702.html

业务咨询

  • 官方微信

    官方微信

  • 商务合作

  • 官方微信

    官方微信

  • Copyright © 2018-2022 小程序开发 APP开发 网站建设 小程序定制 APP定制 All Rights Reserved. 网站地图
    电话咨询:18936104252
    在线客服咨询