Small micro channel program development - promise package using asynchronous request

Preface:

There vue of the school asks how to encapsulate network requests, here is to write small programs, for example, make a small request package program.

Small program initiated HTTPS network requests Api, the details can refer to the official document: wx.request (Object Object) .

If you use a direct Api official, then every time a network request call is made, we all have to say on the official documents that pass the request parameters to be set, then the corresponding results for different requests to do differently. However, with the front end interface requests the server has most of the request parameter and in response to results of the processing are very similar, there is no need to re-code for all requests knock again, then the native network requests have encapsulated necessary .

Package network requests:

If the interface more, you can create two files, complete the package network requests:

1. http.js

1 / * 
 2 * The method of encapsulation http request 
 . 3 * / 
 . 4 apiUrl = const "https://www.xxx.cn"; api address // server 
 . 5 http const = (the params) => { 
 . 6 // returns the object promise 
 return new new Promise. 7 ((Resolve, Reject) => { 
 . 8 wx.request ({ 
 . 9 URL: apiUrl + params.url, // url + server specific interface address parameters carried in the 
10 data: params.data, // request parameters 
header. 11: {|| params.header 
12 is "the Content-the Type": "file application / X-WWW-form-urlencoded" // set required rear common formats like, when special circumstances call separately provided 
13}, 
14 method: params.method || 'POST' , // default is GET, can not write, such as the commonly POST request format, can be set as the default POST request method 
15 dataType: params.dataType, // returns the data formats, the default is JSON, special formats can pass parameters when calling the 
16 responseType: params.responseType,// Data type of response
Success. 17: function (RES) { 
18 is an interface to access the data is returned // 
. 19 IF (== 200 is res.statusCode) { 
20 is operating. 1 // Successful return data, returns a success status (e.g., present in principle only for the server. Examples of 000000) 
21 is IF (res.data.retCode == "000000") { 
22 is Resolve (res.data) 
23 is the else} IF (params.url == "/ Order / Result" && res.data.retCode = = "800020") {// unknown result of payment       
24 // require special handling interface, data can be listed separately to return 
25 Resolve (res.data) 
26 is the else {} 
27 wx.showToast ({ 
28 icon: "none", 
title 29: res.data.retMsg 
30}) 
31 is the console.log (RES.data)
32           }
33         } else {
34 2 // return data operation is unsuccessful, the response information in a toast pop-up manner, as the rear end of the non-operating successfully unformatted abnormality information, abnormality can be uniformly defined tips 
35 errMsg An var = res.data.message 
36 errorToast (); 
the console.log 37 [(res.data) 
38 is} 
39}, 
40 Fail: function (E) { 
41 is errorToast (); 
42 is Reject (E) 
43 is} 
44 is}) 
45}) 
46 is} 
47 {module.exports = 
48 HTTP : HTTP 
49}

Note: The top code has more detailed comments, and will not repeat them.

2. api.js

 1 import {
 2   http
 3 } from '../utils/util.js'
 4 
 5 var url = {
 6   userLogin: "/user/login", 
 7   getUserPhone: "/user/phone", 
 8   ...
 9   userCardReceive: "/card/receive" 
10 }
11 module.exports = {
12   userLogin(code) {
13     return http({      
14       url: url.userLogin,
15       data: { code: code},
16       header: {
17         "Content-Type": "application/x-www-form-urlencoded"
18       }
19     })
20   },
21   getUserPhone(params) {
22     return http({
23       url: url.getUserPhone,
24       data: params
25     })
26   },
27   ...
28   userCardReceive() {
29     return http({
30       url: url.userCardReceive,
31       method:"GET"
32     })
33   },
34 }

Note: a function request package, and as to the callback function returns a request result. The specific parameters can be set separately.

Invocation:

Http.getUserPhone. 1 (the params) .then (Data => { 
2 IF (Data) { 
. 3 // return the result of the processing logic 
4 ... 
5} 
6})

Personal original blog, reproduced, please indicate the source address: https://www.cnblogs.com/xyyt/p/9715367.html

Personal original blog, reproduced, please indicate the source address: https: //www.cnblogs.com/xyyt