【问题总结（13）优化从后端调取接口 promise async await promise.all

1.后台group映射
hardCode
map映射 写到methods里面
把后端的 groups 映射 键值对 取出来
参考 pending state 与 审批待审批的关系
2. 优化调取接口
1）删除慢的原因是
又把数据重新拿了一遍
分不清 变的数据和不变的数据
loadData是加载table数据，取别的接口不应当放这里，
参考同事的代码 怎么取接口
2）加载慢的原因是取了太多接口
可以用promise All 并发

3.加载慢的原因 debugger

接下来的思路
参考同事们的代码
1.优化取接口
2.hardcode 前端map一一映射键值对

要把下面这些接口拆开。

调用后台的数据分2种，一种是动态的数据，如province.js、city.js、area.js
一种是不变的数据 如account.js
后者用来渲染出table

// An highlighted block
 const accountObj = await getAll()
      // console.log(accountObj)
      const accountList = accountObj.result
      // console.log(accountList)
      // console.log(accountList.province)// 拿不到，缺少索引
      this.accountList = accountList// 拿到了mock数据里所有record,并以对象数组accountList接收
      // console.log(accountList)
      // console.log(accountList[0].province)// 310000 // 索引下标假设为accountIndex //遍历 取出对象数组里的属性province的属性值
      // 测试

      // 调用provinces接口
      const provinceObj = await getAllProvinces()
      // console.log(provinceObj)
      const provinceList = provinceObj.result
      this.provicneList = provinceList// 拿到了mock数据里所有省份，并以对象数组provinceList接收 等同于provinces

       // 调用cities接口
      const cityObj = await getAllCities()
      // console.log(cityObj)
      const cityList = cityObj.result
      this.cityList = cityList
      // console.log(cityList) // 取得的cityMoreArrList数组与provinceList格式不同 是一个数组集合 接下来的思路时把

      //  调用area接口
      const areaObj = await getAllArea()
      // console.log(areaObj)
      const areaList = areaObj.result
      this.areaList = areaList
      // console.log(areaList)

      // 调用cat接口
      const catObj = await getAllCat()
      // console.log(catObj)
      const catList = await catObj.result
      // console.log(catList)
      this.catList = catList

       // 调用dog接口
      const dogObj = await getAllDog()
      // console.log(dogObj)
      const dogList = dogObj.result
      this.dogList = dogList

      // getOne 调取accountId
      // const accountIdObj = await getOne()
      // console.log(accountIdObj)
      // const accountIdList = accountIdObj.result
      // console.log(accountIdList)

      // 方法一 将provinceList合到accountList
      for (const accountItem of accountList) {
        const _index = provinceList.findIndex(c => c.code === accountItem.province)
        // console.log(_index)
        if (_index > -1) {
          accountItem.province = provinceList[_index].name
        }
      }
      // console.log(accountList)// 成功！如法炮制其他
      // 将cityList合到accountList
      for (const accountItem of accountList) {
        const _index = cityList.findIndex(c => c.code === accountItem.city)
        // console.log(_index)
        if (_index > -1) {
          accountItem.city = cityList[_index].name
        }
      }
      // 将areaList合到accountList
      for (const accountItem of accountList) {
        const _index = areaList.findIndex(c => c.code === accountItem.area)
        // console.log(_index)
        if (_index > -1) {
          accountItem.area = areaList[_index].name
        }
      }
      // 将对应的catList,dogList合到accountList animal
      // 现在的问题是 catList里的name 不能全合到accountList的animal，要做判断
      // 筛选出来只有猫的if( accountItem.group === 'cat')
      for (const accountItem of accountList) {
        // console.log(accountItem.group)
        if (accountItem.group === 'cat') {
          const _index = catList.findIndex(c => c.id === accountItem.animal)
          // console.log(_index)
          if (_index > -1) {
            accountItem.animal = catList[_index].name
          }
        } else {
            const _index = dogList.findIndex(c => c.id === accountItem.animal)
            // console.log(_index)
            if (_index > -1) {
              accountItem.animal = dogList[_index].name
            }
          }
      }

下面开始拆分接口 内联代码片。

定义methods里的方法 要先调用，然后才可以打印出来

// An highlighted block
methods{
 async getProvinceList () {
     // 调用provinces接口
      const provinceObj = await getAllProvinces()
      console.log(provinceObj, '1')
      const provinceList = provinceObj.result
      this.provicneList = provinceList// 拿到了mock数据里所有省份，并以对象数组provinceList接收 等同于provinces
      console.log(provinceList, '2')
    },
},
created{
....
}

打印台并没有显示 原因是没有调用。

在created{}里调用

// An highlighted block
created{
this.getProvinceList()
}

4.出现问题 是 在
过滤函数
customaRender

await 按顺序
原来是异步的 需要处理成同步按顺序的，或者用promise.all 等到全部的数据拿完，然后再写一个函数把 所有的code,id替换成汉字的description 可以尝试用customRender

对于省份和城市这部分最佳的解决办法是你写一个公共service，在你整个应用初始化的时候就吧这些数据拿到,这些数据应该是比较常用的,放到store里面。然后你要转换的时候你去掉这个service 的一个方法，传两个参数一个是key ,一个是你要转换的id,然后根据这两个参数找到id 对应的name,然后把他返回就可以了

今天Promise
先试一下Promise
要完成的：
关于从后台取接口
方法一
promise async 与 await 按顺序返回值，先拿到loadData
怎么用
方法二
promise.all 一次性全都拿到，然后再过滤数据

关于过滤数据
方法一
customeRender函数 text 是单元格，record是一行数据，index是行的下标索引
方法二
公共Service,

经过大脑思考 从后台取接口数据，选择方法二 promise.all 过滤数据 customReder 传参数 text record index

Promise.all

async getXXX 是一个语法糖
是一个promise对象
async await 是一个先后顺序
下面展示一些 内联代码片。

async await 

// An highlighted block
 async getAllList () {
      console.log(123213, this.getCityList())
     //try catch 来抛出一个错误
      const data1 = await this.loadData() 
      console.log('data1', data1)

      const data2 = await this.getProvinceList() //await住getProvinceList，然后等待上面的loadData 执行完再执行getProvinceList
      console.log('data2', data2)

      const data3 = await this.getCityList()
      console.log('data3', data3)

      const data4 = await this.getAreaList()
      console.log('data4', data4)
   }

这里是有先后顺序的 优先级由高到低 loadData …

async
promise对象

// An highlighted block
 async getAllList () {
      console.log(123213, this.getCityList()) //Promise对象
      

async 返回的是一个 promise对象

promise.all 是异步的 迭代的接口可能不按顺序
下面展示一些 内联代码片。

传参data1,data2,data3 接收数据

// An highlighted block
Promise.all([this.loadData(), this.getProvinceList(), this.getCityList(), this.getAreaList()]).then(([data1, data2, data3, data4]) => {
      //   console.log(111111, data1, data2, data3, data4) // [{},{}]
      // }).catch(err => {
      //   console.log(err)
      // })

没有打印出来的是 忘记return了

//