微信小程序中Promise封装request请求

一、Promise简单的封装使用

1、简单的封装函数

// promise发起网络请求
//发起网络请求 支持跨域 请求与处理在一起，通过回调方式来进行，避免回调地狱
//解决回调地狱 es6提供promise ==> es7 async await(目前微信小程序不支持)
//使用promise 请求与处理分离
reqData(){
  return new Promise((suc,err)=>{
    var reqTask = wx.request({
      url: 'https://www.baidu.com',
      data: {},
      header: {'content-type':'application/json'},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: (ret)=>suc(ret),
      fail: ()=>err,
      complete: ()=>{}
    });
  })
},

2、wxml文件

<button class="btn" type="primary" bindtap="onTap">
  按钮文本
</button>

 3、调用函数（使用）

//使用
onTap(){
  let p1=this.reqData(); //p表示promise对象
  //promise對象中有then表示成功處理，catch表示失败处理
  //then 可以传2个参数，第1从参数，成功处理；第2参数，失败处理
  //then(succ=>{},err=>{})
  //解决回调问题，同时Promise没有让return权力消失
  p1.then(ret1=>{
    console.log(ret1);
    let p2=this.reqData();
    return p2
  }).then(ret2=>{
    console.log(ret2)
  })
}

 二、封装成所有页面共用的函数

1、在主目录下utils创建新的js文件http.js

 

 2、封装函数

function httpRequest(url,data={},method){
  return new Promise((resolve, reject)=>{
    wx.request({
      url,
      data,
      header: {'content-type':'application/json'},
      method,
      dataType: 'json',
      success:ret=> resolve(ret),
      fail:err=>reject(err)
    })
  })
}

//导出函数
export {httpRequest};

 3、可以在任何页面导入使用

import {httpRequest} from '../../utils/http.js'


// pages/model/model.js
Page({
  data: {
    
  },

  onTap2(){
    let url="https://www.baidu.com/"
    httpRequest(url).then(ret=>{
      console.log(ret)
    })
  },