promise,await,async,generator(1)（一天一个问题14）

promise

1.解决了回到地狱的问题

$.ajax({
    url: 'data1.json',
    type: 'GET',
    success: function (res) {
        $.ajax({
            url: res.url, // 将 第一个ajax请求成功得到的res 用于第二个ajax请求
            type: 'GET',
            success: function (res) {
                $.ajax({
                    url: res.url,  // 将第二个ajax请求成功得到的res 用于第三个ajax请求
                    type: 'GET',
                    success: function (res) {
                        console.log(res)   // {url: "this is data3.json"}
                    },
                    error: function(err) {
                        console.log(err)
                    }
                })
            },
            error: function(err) {
                console.log(err)
            }
        })
    },
    error: function(err) {
        console.log(err)
    }
})

我们使用ajax发起异步请求获取数据，但是当我们需要从得到的数据中用于请求下一个异步任务时，就会有多个回调函数嵌套在里面，这个时候代码阅读性就会变得很差，维护成本也相对较高，这种回调函数层层嵌套我们称之为回调地狱。

Promise是异步编程的一种解决方案

2.实际使用

export function get(url, params){  
  return new Promise((resolve, reject) =>{    
    axios.get(url, {      
      params: params    
    }).then(res => {
      resolve(res.data);//执行resolve----成功会被.then接手
    }).catch(err =>{
      reject(err.data)//执行reject----失败会被.catch接手   
    })  
  });
}

this.get('/toutiao/index?type=top&key=秘钥',{})
  .then((res)=>{
    if(res.error_code===0){
      resolve(res);
    }else{
      //这里抛出的异常被下面的catch所捕获
      reject(error);
    }
  })
  .catch((err)=>{
    console.log(err)
  })

解读

1.this.get(’/toutiao/index?type=top&key=秘钥’,{})传进去url和参数—生成了一个promise实例，后面可以用.then()和.catch()指定resolved状态和rejected状态的回调函数。
2.axios请求如果成功，进入到自己的这个异步操作成功.then，执行resolve(res.data)，触发promise实例 .then((res)=>{
if(res.error_code===0){
resolve(res);
}else{
//这里抛出的异常被下面的catch所捕获
reject(error);
}
})
3…axios请求如果失败，执行.catch(err =>{
reject(err.data)
}) ，reject(err.data) 触发promise实例.catch函数
4.注意：在执行new Promise().then()时，如果里面有报错也会跳进.catch()里边

promise解读

2过程3状态

状态：
pending：进行中
fulfilled :已经成功
rejected 已经失败
过程：
pending—fulfilled --成功--------resolve（）接受成功
pending–rejected --失败--------reject（）接受失败