Promise encapsulation wx.request method

The previous article introduced the implementation method of using Promise to encapsulate the small program wx.request. This article focuses on the method of using promise to encapsulate wx.request. The specific content is as follows:

Why encapsulate wx.request?

Because when we request an interface, sometimes we request multiple APIs of an interface. If we do not use encapsulation, then writing code will become cumbersome and will also cause performance problems.

Encapsulation will facilitate our writing, improve user experience and facilitate code modification.

Why use promises for encapsulation choices?

When we are writing WeChat applet, when we write wx.request, I think everyone must be familiar with this writing method, which is similar to the writing method of $.ajax. We must be familiar with the encapsulation of $.ajax, so it is not difficult for us to associate it with promise. And our WeChat applet supports es6 syntax, so promise is a good encapsulation choice.

How to encapsulate wx.request?

Now that we have found the reason and tools for encapsulation, the next step is to encapsulate the tricky thing wx.request. First, create a file in our development tool

We wrap it in a large folder and process the contents separately.

First, in our fetch.js file, we use promise to encapsulate wx.request:

//promise encapsulates wx.request
    module.exports=(url,data,method)=>{
        //Define promise first
        let promise = new Promise((resolve, reject) => {
            wx.request({
                url:url,
                data:data,
                method:method,
 
                //Execute success(res){
                    resolve(res)
                },
 
                //Execute fail(err){
                    reject(err)
                },
    })
    })
                //Push the promise to return promise
    }

Then, in our api.js file, we can put everything we need to request here for unified management:

//Interface managementmodule.exports={
    "banner":"/h8/home/multidata"
}

Finally, in our http.js file, we centralize it and use it:

//Introduce file const api=require("./api")
    const fetch = require("./fetch")
 
//Define the path let baseUrl="http://123.207.32.32:8000/api"
 
//Export content function banner(){
        return fetch(baseUrl+api.banner,{},'get')
    }
 
    module.exports={
        banner
    }

After encapsulation, we need to import it in the global app.js before we can use it:

  const http = require('./http/http.js')
 
    App({
      http,
    })

Use in the file:

    //Introduce app
    const app = getApp()
 
    Page({
      data: {
       list:[]
      }
 
    onLoad: function () {
        app.http.banner().then(res)=>{
            this.setData({
                list:res.data.data.banner.list        
        })
            }
    }

This is the end of this article about promise encapsulation of wx.request. For more relevant promise encapsulation of wx.request content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!