当前位置：首页 > article >正文

前端学习---(6)js基础--4

article 2024/10/27 14:43:20

Promise
Promise 是异步编程的一种新的解决方案和规范。
Promise优点:

1、可以很好地解决ES5中的回调地狱的问题（避免了层层嵌套的回调函数）。
2、统一规范、语法简洁、可读性和和可维护性强。
3、Promise 对象提供了简洁的 API，使得管理异步任务更方便、更灵活。

Promise的基本使用



// 封装异步任务
function requestData(url) {
  // resolve 和 reject 这两个单词是形参，可以自由命名。大家的习惯写法是写成 resolve 和 reject
  const promise = new Promise((resolve, reject) => {
    const res = {
      retCode: 0,
      data: 'qiangu yihao`s data',
      errMsg: 'not login',
    };
    setTimeout(() => {
      if (res.retCode == 0) {
        // 网络请求成功
        resolve(res.data);
      } else {
        // 网络请求失败
        reject(res.errMsg);
      }
    }, 1000);
  });
  return promise;
}


// 调用异步任务
requestData('www.qianguyihao.com/index1').then(data => {
  console.log('异步任务执行成功:', data);
}).catch(err=> {
  console.log('异步任务执行失败:', err);
})

// 再次调用异步任务
requestData('www.qianguyihao.com/index2').then(data => {
  console.log('异步任务再次执行成功:', data);
}).catch(err=> {
  console.log('异步任务再次执行失败:', err);
})

Promise 的回调函数

onst promise = new Promise(executor);
// 【划重点】下面这两行代码是等价的，选其中一种写法即可。这两种写法没有区别，只是写法形式上的区别
promise.then(onFulfilled, onRejected);
promise.then(onFulfilled).catch(onRejected);

有了 Promise 之后，我们不需要传入回调函数，而是：
先将 promise 实例化；
然后在原来执行回调函数的地方，改为执行对应的改变 promise 状态的函数；
并通过 then … catch 或者 then …then 等写法，实现链式调用，提高代码可读性。
promise 在写法上的大致区别是：定义异步函数的时候，将 callback 改为 resolve 和 reject，待状态改变之后，

Promise 实例提供了如下方法：
promise.then()：异步任务成功的回调函数。
promise.catch()：异步任务失败的回调函数。
promise.finaly()：异步任务无论成功与否，都会执行的回调函数。

Promise 的链式调用写法

// 【公共方法层】封装 ajax 请求的伪代码。传入请求地址、请求参数，以及回调函数 success 和 fail。
function requestAjax(url, params, success, fail) {
  var xhr = new xhrRequest();
  // 设置请求方法、请求地址。请求地址的格式一般是：'https://api.example.com/data?' + 'key1=value1&key2=value2'
  xhr.open('GET', url);
  // 设置请求头（如果需要）
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      success && success(xhr.responseText);
    } else {
      fail && fail(new Error('接口请求失败'));
    }
  };
}

// 【model层】将接口请求封装为 Promise
function requestData1(params_1) {
  return new Promise((resolve, reject) => {
    requestAjax('https://api.qianguyihao.com/url_1', params_1, res => {
      // 这里的 res 是接口返回的数据。返回码 retCode 为 0 代表接口请求成功。
      if (res.retCode == 0) {
        // 接口请求成功时调用
        resolve('request success' + res);
      } else {
        // 接口请求异常时调用
        reject({ retCode: -1, msg: 'network error' });
      }
    });
  });
}


// requestData2、requestData3的写法与 requestData1类似。他们的请求地址、请求参数、接口返回结果不同，所以需要挨个单独封装 Promise。
function requestData2(params_2) {
  return new Promise((resolve, reject) => {
    requestAjax('https://api.qianguyihao.com/url_2', params_2, res => {
      if (res.retCode == 0) {
        resolve('request success' + res);
      } else {
        reject({ retCode: -1, msg: 'network error' });
      }
    });
  });
}

function requestData3(params_3) {
  return new Promise((resolve, reject) => {
    requestAjax('https://api.qianguyihao.com/url_3', params_3, res => {
      if (res.retCode == 0) {
        resolve('request success' + res);
      } else {
        reject({ retCode: -1, msg: 'network error' });
      }
    });
  });
}



requestData1(params_1).then(res1 => {
  console.log('第一个接口请求成功:' + JSON.stringify(res1));
  // 【关键代码】继续请求第二个接口。如果有需要，也可以把 res1 的数据传给 requestData2()的参数
  return requestData2(res1);
}).then(res2 => {
  console.log('第二个接口请求成功:' + JSON.stringify(res2));
  // 【关键代码】继续请求第三个接口。如果有需要，也可以把 res2 的数据传给 requestData3()的参数
  return requestData3(res2);
}).then(res3 => {
  console.log('第三个接口请求成功:' + JSON.stringify(res3));
}).catch(err => {
  console.log(err);
})