异步编程Promise对象

柔情只为你懂 2022-11-18 01:55 203阅读 0赞

**1、Promise 是一个对象，从它可以获取异步操作的消息 **

例如：

**resolve、reject** 是两个函数 ，其中成功调用resolve，失败调用reject。

当调用resolve是 p的状态为成功 当调用reject是 p的状态为失败。利用p.then的方式添加回调函数

**2、利用Promise封装ajax请求**

**3、基于上面ajax异步请求，我们来演示一个微信小程序的异步请求，并按模块化的思想将其封装**

request模块导出：

export const request = (params) => {
        return new Promise((resolve, reject) => {
            wx.request({
                /*  
                    ES6中的三个点 ... 有两个名字:rest参数和扩展运算符.
                    当用在函数定义时的形参前面时,称为rest参数,当函数调用时,用于接收不确定的参数.
                    当与解构赋值组合使用时,称为rest参数,用于接收剩余的值,存储在数组中.
                    当用在字符串或数组前面时称为扩展运算符,将数组或字符串进行拆解.
                */
                ...params,
                success: (result) => { //成功的回调函数
                    resolve(result);
                },
                fail: (error) => { //失败的回调函数
                    reject(error);
                }
            })
        })
    }

引入request模块：

import { request } from '../../request/index';
    Page({
        data: {
            //轮播图数组
            swiperList: [],      
        },
        onLoad: function(options) {
            this.getSwiperList();
        },
        // 获取录播图图片
        getSwiperList() {
            /* 使用promise对象 避免回调地狱 */
            request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata" })
                .then(result => {
                    this.setData({
                        swiperList: result.data.message
                    })
                })
        }
    })