Wendy regex replace graphics casting yii2 HammerJS ACE vue网站 建站一条龙 oracle删除字段sql java反射方法 git登陆命令 python导入文件 java编程课程 java编程学习入门 java迭代器 java接口的使用 java单继承 java中map java日期格式 linux命令行 javascript案例 高效能人士的七个习惯下载 gg修改器下载 视频后期处理软件 ppt格式刷怎么用 jpg格式转换器 内存条有什么用 debian安装教程 dll下载站 企业路由器设置 骰子技巧 纸艺大师 mac强制关机 苹果视频剪辑 强国积分 nginx重定向 汉仪中黑简 男声变女声
当前位置: 首页 > 学习教程  > 编程语言

将原生的请求修改为promise的方式

2021/1/28 23:34:07 文章标签:

将原生的请求修改为promise的方式 微信小程序 网络发送异步请求获取轮播图数据的 原始代码: // pages>index>index.js>...这种原生请求获取数据的方式没有问题,但需要多次获取数据的时候就会陷入“地狱嵌套” 我们可以通过 es6 的 promise 来…

将原生的请求修改为promise的方式

微信小程序 网络发送异步请求获取轮播图数据的 原始代码:

// pages>index>index.js>...

在网络发送异步请求获取轮播图
这种原生请求获取数据的方式没有问题,但需要多次获取数据的时候就会陷入“地狱嵌套”
我们可以通过 es6 的 promise 来进行优化,解决这个问题:

首先,在 资源管理器 中新建一个 request 文件夹
在里面新建 : index.js

// request>index.js>...
export const request=(params)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
     ...params,
     success:(result)=>{
       resolve(result);
     },
     fail:(err)=>{
       reject(err);
     }
    });
  })
}
resolve表示成功时候执行的回调函数 ; reject表示失败的时候执行的回调函数
通过调用函数传递参数的形式使用 params

完成了最简单的封装过的微信请求代码,然后回到首页引用代码:

// pages>index>index.js>...
//1 引入 用来发送请求的方法 
import{ request }from "../../request/index.js";
Page({
  data: {
    //轮播图数组
    swiperList:[]
  },
 //页面开始加载 就会触发
  onLoad:function(options) {
    request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
    .then(result=>{
      this.setData({
        swiperList:result.data.message
      })
    })  
  }, 
})
调用自己封装的 request 函数
让url传递到"...params"这个位置,发送请求
保存后 请求成功 就可以触发一个 .then 函数,返回值为 rusult
这时请求成功后的参数 result 就会传递到 .then 里边
最后把数据导入Data

在这里插入图片描述

这时如果有嵌套,就可以在同层级后面加入 .then 函数,优化代码更加直观了。

在这里插入图片描述

开始学小程序,第一次写文章,请多指教呀!


本文链接: http://www.dtmao.cc/news_show_650239.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?