Recently, I am learning about writing small programs. I need to call back-end interfaces and often use methods, so I encapsulated them myself and simplified the code. If it can help you, I will use Java SSM framework for the back-end, and the URL is the interface provided by the back-end. During the encapsulation, I read many blogs online. More than 90% of them are directly printed in the success callback function and there is no problem. However, we all know that the data of WeChat applets implements data binding, which is very similar to the Vue framework. In the JS file of the Vue framework, we can use it through
function loginSuccess(data){
//Successful callback function //Specific data processing}
This way defines the callback method, and at the same time modify the parameter value in data through the new Vue name.data parameter name. Because of this habit, I used this way in the applet for the beginning and reported an error. It took a long time to understand. Now let’s take a look at the encapsulation and use of the HTTP request method of my applet:
1. Method encapsulation (create a new folder util, tool file, create a file under the folder, used to encapsulate method)
：
var app = getApp();
//The same part of the project URL reduces the amount of code and facilitates project migration.//Because I am debugging here, the host is not standardized, and it should actually be the domain name information you registeredvar host = 'http://localhost:8081/demo/';
/**
* POST request,
* URL: Interface
* postData: parameter, json type
* doSuccess: a successful callback function
* doFail: Failed callback function
*/
function request(url, postData, doSuccess, doFail) {
({
//The real interface of the project is implemented through string splicing url: host + url,
header: {
"content-type": "application/json;charset=UTF-8"
},
data: postData,
method: 'POST',
success: function (res) {
//The parameter value is, the returned data will be directly passed into doSuccess();
},
fail: function () {
doFail();
},
})
}
//GET request, no argument is required, just call the URL.function getData(url, doSuccess, doFail) {
({
url: host + url,
header: {
"content-type": "application/json;charset=UTF-8"
},
method: 'GET',
success: function (res) {
doSuccess();
},
fail: function () {
doFail();
},
})
}
/**
* Used to export code
* Loading in js file via var call = require("../util/")
* When introducing the imported file, the contents in "" are passed through this type of.../../../../, the applet compiler will automatically prompt because you may
* The project directory is more than one level, and the corresponding tool classes for different js files are different
*/
= request;
= getData;
Create a folder any of them, create four types of files, and add them to js
//Introduce codevar call = require("../util/")
Page({
data: {
pictureList: [],
},
onLoad: function () {
var that = this;
//Call the encapsulated method, so that I can directly execute this method when the page is loading ('', , );
// Useless, I forgot the comments before, sorry // (that);
},
shuffleSuc: function (data) {
var that = this;
({
pictureList:
})
//I tested it later, it's OK, but because I didn't use the encapsulation method //Report a fault and cannot use this directly, so when I assign a value, I usually add var that = this; //This sentence is a habit that is not a habit },
fail: function () {
("fail")
},
})
Write the callback function in the page and call this. method name when calling the encapsulation method, so that the method can be ensured to be effective. If the function method is written outside, the applet compiler will not report an error, but bindtap is invalid in wxml. I didn't go into it. At the same time, although you can enter the method when calling it in the method, the assignment is invalid, so I do not recommend this method:
function shuffleSuc(data) {
var that = this;
({
pictureList:
})
}
Of course, if anyone has new insights, please leave a message
3. After running, you can print the value in data through the console of the applet AppData, and it can also be displayed on the page as needed.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.