vue---promise-ajax

1.1

<script src="node_modules/vue/dist/vue.js"></script>
<!-- 基于promise的 -->
<script src="node_modules/axios/dist/axios.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    // 专门用来发送ajax方法
    created (){ // 在数据被初始化后会调用，this指向指的也是vm实例，钩子函数
      // Promise 解决回调问题的
      axios.get('./carts.json').then(res => { //success
        this.products = res.data;
      },err => { //error
        console.log(err);
      });
    },
    data: {
      products: []
    }
  })
</script>

1.2 对Promise的使用

// 判断是否登录
// 这个是对checkLogin 进行Promise的封装
let checkLogin = function (){
  // 这里需要加return, 要返回一个Promise的结构, 才能通过.then()的方式去调用。
  return new Promise(function (resolve, reject){
    // cookie有userId, 说明已登录
    let flag = document.cookie.indexOf("userId")>-1?true: false;

    // 说明登录了
    if(flag=true){ // 这是给flag传一个默认值
      // 这是固定的格式。一定要通过resolve进行返回。
      resolve({
        status: 0,
        result: true
      })
    } else {
      // 报错
      reject("error");
    }
  })
}

// 登录成功后，需要去获取用户信息
// 这个是对getUserInfo 进行Promise的封装
let getUserInfo = () => {
  return new Promise((resolve, reject) => {
    let userInfo = {
      userId: "101"
    }
    resolve(userInfo);
  })
}


// 调用
checkLogin().then((res) => {
  if(res.status == 0){
    console.log("login success");
    // 登录成功后，去获取用户信息
    // 因为getUserInfo返回的是个Promise
    return getUserInfo();
  }
})
// 怎么去捕获异常
.catch((error) => {
  console.log(`error: ${error}`);
})
// 因为getUserInfo返回的是个Promise
// 所以继续可以使用Promise来调用
// 去获取用户信息，可以使用链式调用
.then((res2) => {
  console.log(`userId:${res2.userId}`)
})

// Promise.all()可以同时调用多个接口和请求
// 参数必须是个Promise的封装好的方法
Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2]) => {
  console.log(`result1: ${res1.result}, result2:${res2.userId}`);
})