Bmob和Promise的完美结合

试用场景,通过bmob条件查询一个表,然后通过表返回的数据,在去查询多个表,在把多个表查询到的数据全部整合成一条数据,直到最后渲染到视图层,也就是各种异步操作。

先来看看Bmob的查询

const query = new Bmob.Query(Bmob.Object.extend("all"))
query.find({
  success: (res) => {
    alert("查询成功")
  },
  error: (error) => {
    alert("查询失败: " + error.code + " " + error.message);
  }
});

综上所述,那么需要在success方法中写入多个表查询,包裹多少层还不知道。此时Promise完美登场。

Promise —— Javascript 中的神器

ES6 原生提供了 Promise 对象。
所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

const promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

基本的 api

Promise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all() // 所有的完成
Promise.race() // 竞速,完成一个即可

结合Bmob


const BmobAll = new Promise((resolve, reject) => {
   query = new Bmob.Query(Bmob.Object.extend("all"))
   query.find({
     success: (res) => {
       resolve(res)
     },
     error: (error) => {
       reject(error)
     }
   });
 })

BmobAll.then(value => {
 // success
 // 这里即可再次进行 bmob 查表操作;
}, value => {
 // failure
});

多个表同时查询;

//任务1
const p1 = new Promise((resolve, reject) => {
 query = new Bmob.Query(Bmob.Object.extend("P1"))
 query.find({
   success: (res) => {
     resolve(res)
   },
   error: (error) => {
     reject(error)
   }
 });
})
//任务2
const p2 = new Promise((resolve, reject) => {
  query = new Bmob.Query(Bmob.Object.extend("P2"))
  query.find({
    success: (res) => {
      resolve(res)
    },
    error: (error) => {
      reject(error)
    }
  });
})
//任务3
const p3 = new Promise((resolve, reject) => {
 query = new Bmob.Query(Bmob.Object.extend("P3"))
 query.find({
   success: (res) => {
     resolve(res)
   },
   error: (error) => {
     reject(error)
   }
 });
})
//所有的任务都请求完成之后会返回他们他们所有的值。为一个数组;在这里就可以拿到所有请求的数据了。
Promise.all([p1,p2,p3]).then((val) => {
  console.log(val)
})

你可能感兴趣的:(Bmob和Promise的完美结合)