原因是我不想每次请求都复制粘贴那么长的请求地址,所以我把前边那一坨请求地址作为基础地址,只传后台给的路由就ok,而且,并不是每次请求都要显示正在加载,这对小程序体验很差,所以,我加了个形参,用来判断是否显示正在加载。最后根据后台给的状态码判断,所有的成功走resolve(.then),所有除了200以外走reject(.catch),然后将loading关闭。关于promise,我就不多讲了,以后有时间在开一篇。

  嗷对了,还有token验证,如果项目有需求的话可以把token放入头字段中,每次请求都将token传给后台。

  依旧老惯例,直接上代码

/**
 * @information 小程序请求方法封装
 * @param {dialog} 是否显示正在加载提示
 * @param {router} 后台路由地址
 * @param {data}   请求参数
 * @param {method} 请求方式
 */

export class httpService {
    request (dialog, router, data = {} ,method ) {
        // 定义基础请求地址
        let baseUrl = "https://www.easy-mock.com/mock/5ad7011f7e015b7701c45150/" //这里放基础地址
        // token验证
        let token = ''
        // 判断是否开启正在加载提示
        dialog && wx.showLoading({ title: '玩命加载中', mask:true })
        // 返回一个promise
        return new Promise((resolve,reject)=> {
            wx.request({
                url:`${baseUrl}${router}`,
                data,
                method,
                header: {
                    Accept:"application/json; charset=utf-8",
                    token
                },
                success (res) {
                    // 判断成功走resolve,其他走reject
                    res.statusCode===200? resolve(res.data) : reject(res.data)
                    // 关闭正在加载
                    dialog && wx.hideLoading(),2000
                },
                fail (error) {
                    // 请求错误提示
                    wx.showToast({
                        title: '服务器错误!',
                        duration: 2000,
                        icon: 'none'
                    })
                }
            })
        })
    }
}

基于promise对小程序http请求方法封装的更多相关文章

  1. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  2. 小程序api请求层封装(Loading全局配置)

    前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封 ...

  3. 微信小程序request请求的封装

    目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...

  4. 小程序-promise封装小程序的请求方法

    // 在utils-->base.js中,封装一个Base类,有一个axios方法 class Base{ constructor(){ } axios(method,url,data){ co ...

  5. 微信小程序 之 请求函数封装

    封装的request的代码 /** * @desc API请求接口类封装 */ /** * POST请求API * @param {String} url 接口地址 * @param {Object} ...

  6. 让微信小程序每次请求的时候不改变session_id的方法

    让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...

  7. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  8. 记一次基于 mpvue 的小程序开发及上线实战

    小程序名称:一起打车吧 项目地址: 客户端:https://github.com/jrainlau/taxi-together-client 服务端:https://github.com/jrainl ...

  9. 微信小程序 网络请求之re.request 和那些坑

    微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

随机推荐

  1. JQuery(三)-- AJAX的深入理解以及JQuery的使用

    HTTP HTTP http: 超文本传输协议.特点:  简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...

  2. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  3. windows下virtualenv中安装MySQL-python

    先在正常的环境下安装 MySQL-python-1.2.3.win-amd64-py2.7.exe (用everything搜索一下就出来) 然后到 C:\Python27\Lib\site-pack ...

  4. linux 文件传输 SCP

    SCP :secure copy (remote file copy program) 也是一个基于SSH安全协议的文件传输命令.与sftp不同的是,它只提供主机间的文件传输功能,没有文件管理的功能. ...

  5. SSM-SpringMVC-16:SpringMVC中小论注解式开发之访问方式篇

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 访问方式可以指定,打个比方,你通过get方式进入登陆页面,通过post发送ajax数据库校验或者post提交 ...

  6. python环境搭建-requests的简单安装(适合新手)

    安装完python之后,一定要记住安装后的路径.这是我当前的路径. 下面是requests的安装步骤: 我们这里直接用pip安装(这样比较适合新手),新版python自带pip,python3.6.1 ...

  7. mysql事务隔离级别详解和实战

    A事务做了操作 没有提交 对B事务来说 就等于没做 获取的都是之前的数据 但是 在A事务中查询的话 查到的都是操作之后的数据 没有提交的数据只有自己看得到,并没有update到数据库. 查看InnoD ...

  8. Web开发:需收藏的JavaScript常用技巧

    原文来自:https://www.baidu.com/home/news/data/newspage?nid=4242707244478773456&n_type=0&p_from=1 ...

  9. Java集合类的详解与应用

    Java集合类的详解与应用 集合简介: 1.定义:可以同时存储不同类型的数据 他的存储空间会随着数据的增大而增大 2.缺点:只能存储引用数据类型 3.优点:更加合理的利用空间,封装了更多的方法,用起来 ...

  10. ansj原子切分和全切分

    ansj第一步会进行原子切分和全切分,并且是在同时进行的.所谓原子,是指短句中不可分割的最小语素单位.例如,一个汉字就是一个原子.全切分,就是把一句话中的所有词都找出来,只要是字典中有的就找出来.例如 ...