Shulou(Shulou.com)06/03 Report--

This article mainly explains the "detailed process of Mini Program request encapsulation". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the detailed process of Mini Program request encapsulation".

Background

The Mini Program code was messy before, so the new project was going to get a package of WeChat Mini Programs's request at the beginning of the project.

Process flow

Let's start with the whole process:

If you have entered the 1.appjs, you will get the user information. If you do not log in, you will log in by default. There is no error handling here.

two。 Users must agree to authorization to operate. If they do not agree to authorization, they will jump all the way to the authorization page.

Undefined

App.js

Get user information in onLaunch

AppSelf = this; / / the application enters for the first time to get user information without any error handling userInfo () .then ((res) = > {console.log (res)) / / print the result if (! res.code) {appSelf.globalData.userInfo = res}}) .catch ((errMsg) = > {console.log (errMsg); / / error message}); httpUtils.jsrequest package const request = function (path, method, data, header) {let user_id = "; let token =" Try {user_id = wx.getStorageSync (USER_ID_KEY); token = wx.getStorageSync (TOKEN_KEY);} catch (e) {} header = header | | {}; let cookie = []; cookie.push ("USERID=" + user_id); cookie.push ("TOKEN=" + token); cookie.push ("device=" + 1); cookie.push ("app_name=" + 1) Cookie.push ("app_version=" + ENV_VERSION); cookie.push ("channel=" + 1); header.cookie = cookie.join (";") Return new Promise ((resolve, reject) = > {wx.request ({/ / backend request url: API_BASE_URL + path, header: header, method: method, data: data Success: function (res) {if (res.statusCode! = = 200) {reject (res.data)} else {if (res.data.code = 20006) {login () .then ((res) = > { Resolve (res)}) .catch ((errMsg) = > {reject (errMsg)) })} resolve (res.data)}}, fail: function (res) {reject ("not data");});}) } loginconst login = function () {try {wx.removeStorageSync (USER_ID_KEY) wx.removeStorageSync (TOKEN_KEY)} catch (e) {} return new Promise ((resolve, reject) = > {wx.login ({success: res = > {let code = res.code) / / authorized. You can call getUserInfo directly to get the avatar nickname without popping up wx.getUserInfo ({withCredentials: true, success: res = > {let userInfo = res.userInfo; let name = userInfo.nickName). Let avatar = userInfo.avatarUrl; let sex = userInfo.gender Let data = {code: code, encryptedData: res.encryptedData, iv: res.iv, name: name, avatar: avatar, sex: sex From: FROM,} Request ("/ api/user/login/byWeChatApplet", "POST", data) .then ((res) = > {if (! res.code) {try {wx.setStorageSync (USER_ID_KEY, res.user_id)) Wx.setStorageSync (TOKEN_KEY, res.token)} catch (e) {reject (JSON.stringify (e)) }} resolve (res)}) .catch ((errMsg) = > {reject (errMsg)}) }, fail: function (res) {console.log (res) If (res.errMsg & & res.errMsg.startsWith ("getUserInfo:fail") & & res.errMsg.search ("unauthorized")! =-1) {/ / Redirect authorization page wx.navigateTo ({url:'/ pages/auth/auth) '}) return } wx.getSetting ({success: (res) = > {if (! res.authSetting ["scope.userInfo"]) {/ / redirect authorization page Wx.navigateTo ({url:'/ pages/auth/auth'})}}) }})}})});}; auth.js

Authorization page js

Page ({data: {}, onLoad: function () {self = this;}, auth: function (e) {console.log (app.globalData.userInfo); if (e.detail.userInfo) {login (). Then ((res) = > {console.log (res)) / / print result if (res.code) {/ / Interface error return} / / Jump back to the previous page wx.navigateBack ()}) .catch ((errMsg) = > {console.log (errMsg)) / / error message});}},}); Thank you for reading. The above is the content of "the detailed process of Mini Program request encapsulation". After the study of this article, I believe you have a deeper understanding of the detailed process of Mini Program request encapsulation, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.