1. 90前端首页
  2. 前端开发
  3. JavaScript

接口处理(串行、并行、并发)

 

开发过程中,一个页面中调用很多接口的需求还是挺常见的。
如果没有特殊要求,可以接口串行处理。

1.async await

  • 定义:async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果。如果你在代码中使用了异步函数,就会发现它的语法和结构会更像是标准的同步函数。 await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
  • 语法:async function name([param[, param[, ... param]]]) { statements }

[return_value] = await expression;

项目中的处理

  • 两个数据模块相互不影响,因此使用接口串行;
  • 这样的好处是一个接口请求错误不影响另一个请求及渲染。
fetchData = async () => {
    const result1 = await Audit.getAuditList()
    const result2 = awaut Audit.getAuditNum()
    runInAction(() => {
    this.ListData = result1
    this.num = result2
    })
  }

开发过程中,一个页面中调用很多接口的需求还是挺常见的。
如果接口串行处理就会导致页面模块逐个渲染,有些场景不符合需求。
这个时候就可以使用promise.all接口并行

2.Promise.all

  • 定义:Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。
  • 语法:Promise.all(iterable); iterable一个可迭代对象,如 Array 或 String。

项目中的处理

  • 因为两个数据要同时渲染不要造成用户体验上面的页面渲染时间差,所以使用promise.all接口并行;
  • 返回的对象数组根据索引把需要的值分别放到各自状态值里;
  • 这样做有缺点一个接口失败另一个也失败,使用前需要好好梳理模块的渲染关系。
fetchData = async () => {
    const result = await Promise.all([Audit.getAuditList(),             Audit.getAuditNumber()]).catch(e=>console.info(e))

      runInAction(() => {
          this.setListData(result[0].value)
        this.num = result[1]
      })
  }

开发过程中,一个页面中可能会出现多个模块调用一个接口。
这时候就要考虑接口并发了。
项目中暂时没有遇到,这个只是扩展

3.Promise + Array

  • 可以通过接口缓存,请求时查询当前进行中的请求会有哪些情况
  • 如果有相同的就返回已经存在的,没有就加入缓存

下面有一个接口处理 返回的是promise对象

getNum = async () => {
    const result: { appCount: number; carCount: number } = await requs.get(\'/test\')
    return result
  }

这个时候就需要一个数组来把返回的promise对象存起来,根据promise的特性,无论处于什么状态(pending 、fulfilled、rejected)都能.then拿到结果。

let promiseResult :{
    key : string
    result : any  // 这个地方可以根据需求改类型这里用any代替
}[]
const comparePromise = ( url: string, params: any) => {
    const key = url + JSON.stringfy(params)
    const resultes = promiseResult.filter(item => item.key === key)
    if(resultes.length > 0){
        console.warn(\'jinggao\')
        return resultes[0].result
    } else { return false }
}

这个时候防止数组的内存溢出可以开启一个定时清除的任务

setInterval(()=>{
    promiseResult = []
},600000)

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021586932

展开阅读全文

发表评论

登录后才能评论