关于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 异步函数 变成了同步函数调用