项目实训-智能生物序列分析平台-前端模块（3）

前端对接口请求部分使用的是async与await异步的操作，下面对本项目中相关的代码进行讲解：

对于单一的 Promise 链其实并不能发现 async/await 的优势，当需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了，
接下来直接上代码：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}
 
function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
 
function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}
 
function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式：

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}
 
doIt();
 
// c:\var\test>node --harmony_async_await .
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1507.251ms

 输出结果 result 是 step3() 的参数 700 + 200 = 900。doIt() 顺序执行了三个步骤，一共用了 300 + 500 + 700 = 1500 毫秒，和 console.time()/console.timeEnd() 计算的结果一致。
 用 async/await 的方式：

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
 
doIt();

结果和之前的 Promise 是一致的，但是这个代码减少了很多

现在改一下要求：

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
 
function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}
 
function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}

 Promise实现：

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}
 
doIt();

async/await实现：

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
 
doIt();
 
// c:\var\test>node --harmony_async_await .
// step1 with 300
// step2 with 800 = 300 + 500
// step3 with 1800 = 300 + 500 + 1000
// result is 2000
// doIt: 2907.387ms

代码与源码借鉴与async/await和Promise区别 - 知乎

我感觉这两个方法解决的都是一类问题，只不过写法与实现方式上面有所区别。

就上课所学与实际用到的情况来讲，对于async await的使用还需要依赖于Promise，两者又有互通性

在本项目中使用远程接口请求的时候

export const jobListGet = async () => {


  Axios.interceptors.request.use(
    config => {
      NProgress.start() // 设置加载进度条(开始..)
      return config
    },
    error => {
      return Promise.reject(error)
    }
  )
  // axios响应拦截器
  Axios.interceptors.response.use(
    function(response) {
      NProgress.done() // 设置加载进度条(结束..)
      return response
    },
    function(error) {
      return Promise.reject(error)
    }
  )

  let result = {
    resultType: false,
    data: [],
  };
  await Axios.get(JOBLIST)
    .then((res) => res.data)
    .then((res) => {
      if (res.code === 0) {
        result.resultType = true;
        result.data = res.data;
        console.log(res);
      } else {
        result.resultType = false;
        console.log(res);
      }
    })
    .catch((err) => {
      result.resultType = false;
    });
  return new Promise((res, rej) => {
    res(result);
  });
};

我们为了使得前端界面能够进行异步相应，不出现同步加载数据不出现的问题，我们在接口请求方面也使用了async与await来控制异步操作的进行​​​​​​​.