promise对象的使用

时间：2021-01-31 23:57:19
ES6中的promise的出现给我们很好的解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，
现在promise的使用，完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那，你可以想象他是一种承诺，当它成功时执行一些代码，当它失败时执行一些代码。
它更符合人类的行为思考习惯，而不在是晦涩难懂的冰冷语言。

多段功能函数

 let state=;
 function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    ){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}

 function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    ){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}

 function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     ){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}

执行上面多算功能函数 这样 优雅的写法 成功避免了 回调地狱

new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);
}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

再优雅的理解上面的多段功能函数

未用前

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Hi'); // 2秒后输出"Hi"
    }, );
}, );

使用后

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, );
});

waitSecond
    .then(function()
    {
      console.log("Hello"); // 1秒后输出"Hello"
      return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

在vue中用上拉加载下拉刷新方式请求数据

methods: {
      // 模拟数据请求
      getData () {
        return new Promise(resolve => {
          setTimeout(() => {
            const arr = []
            ; i < ; i++) {
              arr.push(count++)
            }
            resolve(arr)
          }, )
        })
      },
      onPullingDown () {
        // 模拟下拉刷新
        console.log('下拉刷新')
        count =
        this.getData().then(res => {
          this.items = res
        })
      },
      onPullingUp () {
        // 模拟上拉 加载更多数据
        console.log('上拉加载')
        this.getData().then(res => {
          this.items = this.items.concat(res)
          ){
            //加载代码
          }else{
           //取消加载
          }
        })
      }
}

借助axios封装post、get请求

//封装统一get请求
export function get(url, param = {}) {
  return new Promise((resolve,reject) => {
    axios.get(url,{ params:param }).then(response => {
      resolve(response.data);
    }).catch(err => {
      reject(err)
    })
  })
};

//封装统一post请求
export function post(url,params = {}){
  return new Promise((resolve,reject) => {
    axios.post(url,params).then(response => {
      resolve(response.data);
    }).catch( err =>{
      reject(err)
    })
  })
};

　　调用方式
　　import {get, post} from '路径';



　　this.get().then( (response) =>{




　　}).catch( (err) =>{




　　})


 




Promise.all 多条异步当作同步一起处理




    async getMarketing(categoryId) {

    }
    async getGoodsList(category_id) {

    }  

   const marketingPromise = self.getMarketing(tabValue)
   const goodsListPromise = self.getGoodsList(tabValue)

   Promise.all([marketingPromise, goodsListPromise]).finally(_ => {
        self.wxApi.hideLoading()
        self.dataLoading = false
   }) 


相关文章