vue中promise的使用

1. Promise 基本概念： 
Promise是一个构造函数，所以可以 new 出一个Promise的实例； 在Promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数)； 在Promise构造函数的prototype属性上，有一个 .then() 方法。 所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法； Promise表示一个一步操作，每当我们new一个Promise的实例，这个实例就代表具体的 异步 操作。 Promise创建的实例，是一个异步操作，这个异步操作结果，只有两种结果： 状态1：异步执行 成功，需要在内部调用成功的回调函数resolve把结果返回给调用者 状态2：异步执行 失败，需要在内部调用失败的回调函数reject把结果返回调用者 由于Promise的实例是一个异步操作，所以内部拿到操作结果后，无法使用return把操作结果返回给调用者 ， 这个时候只能使用 回调函数 的形式，把成功或失败的结果，返回给调用者，具体： 我们可以在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操作，指定成功(resolve)和失败(reject)回调函数。

resolve —>对应then
reject —>对应catch
另外，只有调用了resolve 或者reject 才会触发 then 和 catch

2、实例

vue中promise的使用

getClassify: function () {
        var that = this;
        // 使用promise处理异步。
        this.updateKinds().then(function () {
          console.log("获取分类结束！");
          that.updateAllContent();
        });
      },

updateKinds ({commit, state}) {
      return new Promise(function (resolve, reject) {
        axios.get('/bbg/shop/get_classify', {
          params: {
            sid:  13729792
          } 
        })
        .then(function (response) {
          if (response.data.code == 130) {
            commit(UPDATE_KINDS, response.data.data)
            console.log(response.data.data);
            resolve()
          }
        }).catch(function (error) {
          console.log(error);
        });
      });

使用promise
1.比如用户想请求url1接口完后再调url2接口

    var promise = new Promise((resolve,reject)=>{
        let url1 = '/toutiao/index?type=top&key=秘钥'
        this.get(url,{})
        .then((res)=>{
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    });
    promise.then((res)=>{
        let url2 = '/toutiao/index?type=top&key=秘钥'
        this.get(ur2,{})
        .then((res)=>{
            //只有当url1请求到数据后才会调用url2，否则等待
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    })

Promise.all()用法

var p = Promise.all([p1, p2, p3]);

all()接受数组作为参数。p1,p2,p3都是Promise的实例对象，p要变成Resolved状态需要p1，p2，p3状态都是Resolved，如果p1,p2,p3至少有一个状态是Rejected，p就会变成Rejected状态

    var p = new Promise(function(resolve, reject){
      setTimeout(function(){
        var flag = false;
        if(flag) {
          // 正常
          resolve('hello');
        }else{
          // 异常
          reject('出错了');
        }
      }, 100);
    });
    //  Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });

 

Send Ajax

/*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    # 注意：  这里需要开启一个服务 
    # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        #  1.4 想要继续链式编程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });

    /*************************** async promise ****************************/

        function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })

axios OPTIONS操作

# 1. 发送get 请求 
  axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
  # 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
  axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
  # 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
  #3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

  # 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
  # 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

  #5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

axios async

# 1.  async 基础用法
  # 1.1 async作为一个关键字放到函数前面
  async function queryData() {
  # 1.2 await关键字只能在使用async定义的函数中使用  await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    # 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

    #2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

 

 

 checkLogin: () => {
// 返回一个promise对象
    return new Promise((resolve, reject) => {
      axios({
            url: url
            method: 'post',
            data: {
            }
          })
            .then((res) => {
              resolve(res.data);
              // console.log(res);
            })
            .catch(function (error) {
              reject(error);
              // console.log(error);
            });
    });
  }

调用

this.common.checkLogin()
              .then(res => {
                console.log(res);
                  // 执行成功的回调函数
              },
              error => { console.log(error); 
              // 执行失败的回调函数
              });

 多次请求

new Promise((resolve, reject) => {
    //执行异步请求
    $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      });
  }).then(data => {
    console.log('请求成功1')

    return new Promise(resolve => {
      $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      });
    }).then(resolve => {
      console.log('请求成功2')
    })
  })

 Promise.al

Promise.all([
    new Promise(resolve => {
      $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      })
    }),
    new Promise(resolve => {
      $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      })
    })
  ]).then(response => {
    console.log(response[0])
    console.log(response[1])
  })