Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序前端promise封装

微信小程序前端promise封装

作者头像
达达前端
发布于 2019-08-25 11:36:15
发布于 2019-08-25 11:36:15
1.1K00
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

config.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const config = {
     base_url_api : "https://douban.uieee.com/v2/movie/",
}

export {config}

http.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { config } from "../config";
class HTTP {
    requset({ url, method = "GET", data = {} }) {
        const promise = new Promise((resolve, reject) => {
            wx.request({
                url: config.base_url_api + url,
                data,
                method,
                header: {
                    'Content-Type': 'json'
                },
                success: res => {
                    //状态码 toString() 转成字符串
                    const statusCode = res.statusCode.toString();

                    if (statusCode.startsWith("2")) {
                        resolve(res.data)
                    } else {
                        this._show_error();
                    }
                },
                fail: res => {
                    reject(err);
                    this._show_error();
                }
            })
        })
        return promise;
    }
    _show_error() {
        wx.showToast({
            title: '网络错误',
            icon: 'none'
        })
    }
}
export { HTTP }

model/movie.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import {HTTP} from "../utils/http";
class MovieModel extends HTTP{
    getInTheaters(){
        return this.requset({
            url:"in_theaters"
        })
    }
    getTop250(){
        return this.requset({
            url:"top250"
        })
    }
    getComingSoon(){
        return this.requset({
            url:"coming_soon"
        })
    }
}
export {MovieModel};

pages/index/index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const app = getApp();
import {MovieModel} from "../../model/movie";
const movieModel = new MovieModel();
Page({
  onLoad(){
    // movieModel.getInTheaters().then(res=>{
    //   console.log(res)
    // })
    const inTheaters = movieModel.getInTheaters()
    const top250 = movieModel.getTop250();
    const comingSoon = movieModel.getComingSoon();
    Promise.all([inTheaters,top250,comingSoon]).then(res=>{
      let[inTheaters,top250,comingSoon] = res;
      console.log(inTheaters)
    })
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序class封装http
config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} utils/http.js import {config} from "../config"; class HTTP{ request(params) { if (!params.method) { params.method = "GET" } wx.request({ ur
达达前端
2019/08/25
6810
微信小程序前端function封装
funtion的封装 utils =>http.js var tips = { 1: "没有网络", 999: "无效的请求", 5000: "没有这些电影" } function http(params) { /*params 对象包含 url,success,method,data */ if(!params.method){ params.method ="GET"; } wx.request({ url:pa
达达前端
2019/08/25
7250
微信小程序HTTP封装请求
http.js import utils from "../../utils/utils" var http = utils.http; const douban = "https://douban.
达达前端
2019/08/25
1.1K0
微信小程序请求封装
config.js const baseUrl = 'http://127.0.0.1:8000/'; export { baseUrl } index.js import { request } from './request' module.exports = { // 获取导航 getNavList: (data) => request('nav/', 'GET', data), } request.js import { baseUrl } from './confi
lyudev
2023/03/01
6730
微信小程序请求封装
微信小程序实战–集阅读与电影于一体的小程序项目(六)
24.更多电影 app.json "pages": [ "pages/posts/post", "pages/welcome/welcome", "pages/posts/post-detail/post-detail", "pages/movies/movies", "pages/movies/more-movie/more-movie" ], more-list-template.wxml <view class="more" catchtap='onMor
zhang_derek
2018/08/30
6700
微信小程序实战–集阅读与电影于一体的小程序项目(六)
微信小程序实战–集阅读与电影于一体的小程序项目(五)
21.电影页面数据绑定 movies.js var app = getApp(); Page({ data: { inTheaters: {}, comingSoon: {}, top250: {}, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var baseUrl = app.globalData.g_baseUrl; var inTheatersUrl = base
zhang_derek
2018/08/30
7110
微信小程序实战–集阅读与电影于一体的小程序项目(五)
Vuex使用
// 遵从store基本写法 // 数据 const state = {}; // 协调回调action const mutations = {}; // 外部直接调用的方法 const actions = {}; export default { state, mutations, actions }; 其中mutations和actions相互对应,使用: const state = { skip: 0, events: [] }; // mutations与actions方法互相
程序员不务正业
2018/09/13
1.1K0
微信小程序电影实战
查询影院热映,推荐电影,查询电影和查看电影详情功能 涉及内容: 网络通信,豆瓣电影接口,模板,网页引用,js封装引用,wxss引用,text,image,swiper,loading,modal,input,button,tabBar
达达前端
2019/08/14
1.8K0
微信小程序电影实战
第四个页面:制作电影资讯页面
之前的文章列表页面还有一个小功能没有实现,就是点击点击轮播图就能跳转到相应的文章详情页面,这个和点击文章列表跳转到文章详情页面的实现方式是一样的。
端碗吹水
2020/09/23
1.5K0
第四个页面:制作电影资讯页面
第五个页面:更多电影页面
我们需要实现两个功能,一是点击电影资讯页面上的 “更多” 时,跳转到更多电影页面中,二是跳转时要获取相应的电影类型。
端碗吹水
2020/09/23
9330
第五个页面:更多电影页面
【愚公系列】2022年02月 微信小程序-Request网络请求的封装
Request网络请求在任何应用中都是必不可少的,但微信小程序的wx.request()太过单一没法满足复杂的请求,所以就有本片文章讲解如何封装小程序的请求
愚公搬代码
2022/02/22
8170
【愚公系列】2022年02月 微信小程序-Request网络请求的封装
微信小程序之onLaunch与onload异步问题
   前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息。再此之前,一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。那么问题就来了,我每次进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过确定,在微信小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的,如在同一个onload写两个请求数据的方法,它不一定会按照先后顺序去执行,这就是传说中的异步地狱了。
追逐时光者
2019/08/28
2.8K0
使用Promise封装小程序wx.request
现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。
九旬
2020/10/23
9650
mpvue——API请求封装(小程序原生)
能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js,做之前先关闭校验合法域名,因为我没在后台进行配置
思索
2024/08/16
1300
mpvue——API请求封装(小程序原生)
小程序笔记篇
豆瓣top250的数据https://api.douban.com/v2/movie/top250
达达前端
2019/07/03
6520
小程序笔记篇
Vue+koa2开发一款全栈小程序(7.图书录入功能)
1.图书录入功能 1.获取图书信息 1.在mydemo/src/until.js中封装工具函数post和get // 工具函数 import config from './config' // http get工具函数 获取数据 export function get (url,data) { return request(url,'GET',data) } export function post (url,data) { return request(url,'POST',data) }
玩蛇的胖纸
2018/10/18
7650
Vue+koa2开发一款全栈小程序(7.图书录入功能)
Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染。
Daotin
2019/08/12
6080
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下小程序开发,坑么总是有的,但是我觉得还是request这部分实在是不好看,所以你懂得,我用Promise 对请求做了个简单封装。本文章所述方法主要针对第三方登录
极乐君
2018/02/03
2.3K0
原生微信小程序flyio封装多baseURL配置请求,如同axios一样非常爽利的使用api
1.下载 引入 flyio 基于 promise Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。 fly下载地址
全栈程序员站长
2022/10/04
1.3K0
小程序Request的封装
更新说明:对文章排版以及内容格式做了调整。 更新时间:2022-05-04 最近做了两个小程序,业务相对比较简单,关于公益方面的,收获颇多,其中感觉在开发中明显提升开发效率以及减少代码量的就是request的封装,下面稍稍做个总结。 通用封装 在utils文件夹下新建两个文件,config.js以及request.js,代码分别如下。 <!-- config.js--> module.exports = { appid: "wxcXXXXXXXXXXXXXX349f", API_B
六个周
2022/10/28
5520
相关推荐
微信小程序class封装http
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验