WePY 项目中使用 Promise

wepy项目中使用Promise

因为不想陷入异步的回调地域中去，所以在一些复杂的业务当中，我们推荐使用 Promise 或者 async-function 来替代传统的回调，因此需要在项目中单独进行配置。

1. 进入项目跟目录，安装依赖

npm install wepy-async-function --save

2. 在app.wpy中导入

import 'wepy-async-function'; 

3. 在app.wpy中开启 promise

export default class extends wepy.app {

    constructor () {
        super();
        this.use('promisify');
    }

}

4. 判断promiss是否引入成功（在app.wpy的onlaunch中）

onLaunch() {
    console.log('on launch');
    let mypro = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(123);
        }, 2000);
    });
    mypro.then((r)=>{
        console.log(r);
    })
}

重启编译后，打印出123即为成功

Promise简易封装请求一：

utils/request.js

//封装ajax请求

const http = (url,type,parameter) => {
  return new Promise((resolve,reject) => {
    wx.request({
      url:url,
      method:type,
      success:function (res) {
        resolve(res.data);
      },
      fail:function (err) {
        reject(err)
      }
    })
  })

}

export {http}

在index.wpy中使用：

import { http } from '../utils/request';

http("https://easy-mock.com/mock/5cc66aee7a9a541c744c9c07/example/restful/:id/list","GET")
  .then(function (res) {
      console.log(res)
  }).catch(function (err) {
      console.log(err)  
  });

Promise简易封装请求二：

utils/utils.js

//==封装post请求
const post = (url,data) =>{
　　let promise = new Promise((resolve,reject)=>{
　　　　wepy.request({
　　　　　　url: url,
　　　　　　data: data,
　　　　　　header:{'content-type':'applicction/x-www-form-urlencoded'}  或者是 header{'content-type':'application/json'},

　　　　　　success: res=>{
　　　　　　　　if(res.statusCode ==200){
　　　　　　　　　　resolve(res)
　　　　　　　　}else {
　　　　　　　　　　reiect(res)
　　　　　　　　}
　　　　　　},
　　　　　　fail: err=>{
　　　　　　　　reject(err)
　　　　　　}
　　　　})
　　})

　　return promise

}

//====封装get请求
const get =(url,data)=>{
　　let promise = new Promise((resolve,reject)=>{
　　　　wepy.request({
　　　　　　url: url,
　　　　　　data: data,
　　　　　　header: {'content-type': 'application/x-www-form-urlencoded'}  或者是  header: {'content-type': 'application/json'},
　　　　　　success: res=>{
　　　　　　　　if(res.statusCode ==200){
　　　　　　　　　　resolve(res)
　　　　　　　　}else {
　　　　　　　　　　reject(res)
　　　　　　　　}
　　　　　　},
　　　　　　fail: err=>{
　　　　　　　　reject(err)
　　　　　　}
　　　　})
　　})

　　return promise

}

module.exports = {
　　post: post,
　　get: get
}

在index.wpy中使用：

const utils = require('../utils/utils.js')

utils.post(url,data).then(res=>{
　　console.log(res)   //====请求成功后
}).catch(err=>{
　　console.log(err)   //====失败后的返回
})