微信小程序 --loading 优化用户体验

在小程序中，通过发送请求拿到服务器端的数据时页面的数据还没有被渲染，只是呈现空白的话用户体验是很差的。

我们可以通过调用小程序的 wx.showLoading() 这个接口让小程序显示 loading 加载动画

// 我们可以在页面加载的生命周期方法 onload 中
onload:function(options) {
    wx.showLoading({
        title: 'loading'    
    })
}

然后我们可以在数据请求完成之后通过调用 wx.hideLoading() 隐藏

// 首先创建一个内含一个发送请求的方法的 HTTP 抽象类
class HTTP {
    request(url,data={},method="GET") {
        const p = new Promise((resolve, reject) => {
            wx.request({
                url: '',
                method: method,
                data: data,
                header: {
                    'content-type': 'application/json'            
                },
                success: (res) => {
                    const code = res.statusCode.toString()
                    if(code.startWith('2')) {
                        resolve(res.data)                
                    } else {
                        reject()
                        wx.showToast({
                            title: '请求失败',
                            icon: "none",
                            duration: 2000                     
                        })                
                    },
                    fail: (err) => {
                        reject()
                        wx.showToast({
                            title: '请求失败',
                            icon: "none",
                            duration: 2000               
                        })                
                    }
                }        
            })     
        })
        return p;    
    }
}

// 然后通过继承 HTTP 类来使用 request 方法发送请求
class BookModel extends HTTP {
    getBookList() {
        return this.request({
            url: 'book/hot_list'  
        })    
    }
}

// 在组件中实例化 BookModel
import {BookModel} from '../model/book.js'
const bookModel = new BookModel

bookModel.getBookList()
    .then(res => {
        console.log(res)    
    })

回到我们的项目需求，在我们发送请求去获取数据时，需要显示 loading ，请求完成后隐藏 loading

onload:function(options) {
    wx.showLoading({
        title: 'loading'    
    })
    
    bookModel.getBookList()
    .then(res => {
        wx.hideLoading()    
    })
}

当我们的页面中不止一个请求的时候，那我们就需要在所有请求都完成之后再隐藏 loading

onload:function(options) {
    wx.showLoading({
        title: 'loading'    
    })
    
    const detail = bookModel.getBookList()
    // 我们可以通过 Promise.all([ promise1, promise2, promise3 ]) 来使所有 promise 都成功返回后再执行 .then()
    // 注意，如果我们使用 Promise.all 那么 .then 中返回的 res 将会是一个数组的形式，而每一个 promise 返回的数据都将作为这个 res 数组中的一项
    // 例如在这个案例中，res[0] 就会是我们的 detail 返回的数据
    Promise.all([ detail ])
	    .then(res = > {
           console.log(res[0])
           wx.hideLoading()
        })
}