箭头函数, Promise对象, async/await语法糖, fetch的综合理解与使用

2023-2-22 10:45:45

1. 箭头函数 (arg1, arg2)=>{}

匿名函数, 如果参数只有一个, 可以不用小括号: 

arg => {console.log(arg);}

说这个是为了方便理解下边的代码

2. Promise对象, 异步语法 (可参考)

基本使用:

//======成功
let p = new Promise((success, error) => {
  success(['1', '2']); //不用return
})
.then(rs => {console.log('success', rs);}) //会走到这里
.catch(rs => {console.log('error', rs);});



//======失败/异常
let p1 = new Promise((success, error) => {
  error([3, 4]); //不用return
})
.then(rs => {console.log('success', rs);})
.catch(rs => {console.log('error', rs);}); //会走到这里

  let pms = new Promise(function(resolve, reject){
    rs = window.prompt('how are you', 'ok');
    if (rs) {
      resolve(rs);
    } else {
      reject('no thing input');
    }
  })
  .then(rs => {console.log('11111'+rs);})
  .catch(rs => {console.log('22222'+rs);});

 

组合使用: 

Promise.all([p1, p2]) .then() .catch();	将多个Promise对象包在一起, 1. 全都走了success回调的时候, 才会走到Promise.all().then()方法, 2. 其中任何一个子Promise走了error方法, 就会走Promise.all().cath()
Promise.race([p1, p2]) .then() .catch();	将多个Promise对象包在一起, 谁先调用success或error, 就会将结果传给Promise.race().then()或catch()
Promise.allSettled([p1, p2]) .then() .catch();	将多个Promise对象包在一起, 所有的子promise都执行完了才会走到Promise.allSettled().then()
Promise.any([p1, p2]) .then() .catch();	将多个Promise对象包在一起, 1. 任何一个子promise走了success就会走到Promise.any().then() 2. 所有的子promise都走了error,才会走到catch()
其他

 

 3. async/await

将一个普通方法转换成Promise对象, 简化了Promise的使用, 可以不用写then了, 我自己不推荐使用, 需要用得可以参考相关文章

4. fetch

1. 虽然Promise是异步管理器, 但Promise并不会发起请求,  具体的异步请求服务器还要fetch或xhr去执行

2. fetch请求后返回值是Promise对象, 所以也有then()和catch()方法.

3. fetch只有在不能成功发起请求的时候才会走catch(), 如果请求成功了, 但服务器返回500,是不会走到catch()中的

4.代码参考 (更多用法参考)

fetch('http://www.test7.com/index.php') //也可以传入一个 Request 对象, 指定get/post, 是否上传cookie等配置
.then(rs => {
  console.log(rs); //返回的是一个 Response 对象
  console.log(rs.ok); //true/false
  console.log(rs.status); //200/500 ...
  console.log(rs.statusText); //OK
  return rs.json(); //把返回结果解析成json格式
  // return rs.text(); //把返回结果解析成string
  // return rs.blob(); //返回图像等二进制数据时使用
})
.then(rs => {console.log(rs);}) //rs是上一个then的return值
.catch(rs => {console.log(rs);}) //catch 有网络故障, 或者第一个then中取值错误等异常时走到这里