关于javascript:微信小程序异步请求封装方案

1.应用callback

1.config.js 定义配置信息

申请的通用信息

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

export {
  config
}

2.在utils包中定义http.js

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) //应用回调函数将数据传出去
            }
        })
    }
}

3.在model包中定义theme.js (业务对象)

import { Http } from '../utils/http';

class Theme{
    //获取首页LocationA
    static getHomeLocationA(callback){
        Http.request({
            url:`/theme`,
            data:{
                name:'t-1',//申请的参数
            },
            callback:data=>{
                callback(data) //回调函数中嵌套回调函数
            }
        })
    }
}

4.在home.js 调用

import { Theme } from '../../model/theme'

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

剖析可知 应用callback函数会呈现函数嵌套

2.应用Promise

1.应用Promise封装Http.js

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)
                }
            })
        })
    }
}

2.改写theme.js

import { Http } from '../utils/http';

class Theme {
  static  getHomeLocationA(params) {
    return Http.request({
       url: `/themes`,
       data: {
         names: params
       }
     })
   }
}

3.home.js

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

3.终级解决方案 async await

为了解决大量简单不易读的Promise异步的问题，才呈现的改良版

async必须申明的是一个function

async申明的函数的返回实质上是一个Promise。

await是在期待一个Promise的异步返回

1.将小程序内置非promise API转化为Promise申请

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
}

2.改写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
}

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
}

4.home.js

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

应用了 async await 异步函数 变成了同步函数调用