1. Use the callback

1.1 config.js Defines configuration information

General information requested

const config = {
  appkey:'zCr1cdeqweq',
  apiBaseUrl:'http://localhost:5300'
}

export {
  config
}

Copy the code

1.2 Define http.js in the utils package

import { config } from '.. /config/config' class Http { static request({url, data, callback, method='GET'}){ wx.request({ url:`${config.apiBaseUrl}${url}`, data, header:{ appkey:config.appkey }, Success :res=>{callback(res.data) // Callback (res.data)}}Copy the code

1.3 Defining Theme.js (business object) in the Model package

import { Http } from '.. /utils/http'; LocationA static getHomeLocationA(callback){http. request({url: '/ Theme', Data :{name:'t-1',// callback:data=>{callback(data) // nested callback function}})}}Copy the code

1.4 Call at home.js

import { Theme } from '.. /.. /model/theme' onLoad: function (options) { Theme.getHomeLocationA(data=>{ this.setData({ topTheme:data[0] }) }) },Copy the code

Function nesting occurs when the callback function is used

2. Use the Promise

2.1 Encapsulate HTTP.js with Promise

import { config } from '.. /config/config' class Http{ static request({url, data, method='GRT'}){ return new Promise((resolve,reject)=>{ wx.request({ url: `${config.apiBaseUrl}${url}`, data, method, header: { appkey: config.appkey }, success:res=>{ resolve(res.data); }, fail:err=>{ reject(err) } }) }) } }Copy the code

2.2 rewrite theme. Js

import { Http } from '.. /utils/http'; class Theme { static getHomeLocationA(params) { return Http.request({ url: `/themes`, data: { names: params } }) } }Copy the code

2.3 home. Js

onLoad: function (options) {
    Theme.getHomeLocationA('t-1').then((data)=>{
      this.setData({
        topTheme:data[0]
      })
    })
}
Copy the code

3. Final solution async await

  • An improved version of Promise was developed to address the large number of complex, unreadable promises that were asynchronous

  • Async must declare a function

  • The return of an async declared function is essentially a Promise.

  • Await is waiting for an asynchronous return from a Promise

3.1 Convert the applets built-in non-Promise APIS into Promise requests

const promisic = function(func) {
    
    return function(params= {}) { 
        
        return new Promise((resolve,reject)=> {
            
            const args = Object.assign(params,{
                success:res=>{
                    resolve(res)
                },
                fail:err=>{
                    reject(err)
                }
            })
            func(args);
        })
    }
    
}

export {
    promisic
}

Copy the code

3.2 rewrite the HTTP js

import { config } from '.. /config/config' import { promisic } from './util' class Http { static async request({url, data, method = 'GET'}){ return await promisic(wx.request)({ url: `${config.apiBaseUrl}${url}`, data, method, header: { appkey: config.appkey }, }) } } export { Http }Copy the code

3.3 theme. Js

import { Http } from '.. /utils/http'; class Theme { static async getHomeLocationA() { const res = await Http.request({ url: `/themes`, data: { names: 't-1' } }) return res.data } } export { Theme }Copy the code

3.4 home. Js

onLoad: async function (options) {
    const data =  await Theme.getHomeLocationA();
    this.setData({
      topTheme:data[0]
    })
},

Copy the code

Asynchronous functions with async await become synchronous function calls