vuex、promise

const {data: {data: { channels: payload },},} = await 
axios.get("");

多层解构，重命名

import axios from "axios"

export default {
  namespaced: true,
  state: {
    allData: {}
  },
  mutations: {
    updateAllData (state, {id, list}) {
      // allData这个对象 这种赋值方式 是不会改变 地址的
      // vue监听对象，需要发现地址改变，才会动态响应
      // state.allData['key'] = [1, 2, 3]

      // id: []
      state.allData = {...state.allData, [id]: list}
    }
  },
  actions: {
    async getAllData (context, cataId) {
      if(context.state.allData[cataId]) {
        return
      }
      const data = await axios.get(`/v1_0/articles?
      channel_id=${cataId}&timestamp=${Date.now()}&with_top=1`)

      console.log(data)
      const list = data.data.data.results
      context.commit('updateAllData',{id:cataId,list:list})
    }
  }
}

promise:

promise可以解决回调地狱的问题。

// const p = new Promise(function (resolve, reject) {
//   reject('失败')
// })
// const p = Promise.reject('失败')  //相当于上面的简写

const p = Promise.reject('失败')

p.then(function (res) {
  console.log(res)
}, function(err) {
   console.log(err + '！！！')
})

async /await：

await 表示强制等待的意思，await关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果

由于await的强制等待，所以必须要求使用await的函数必须使用async标记， async表示该函数就是一个异步函数，不会阻塞其他执行逻辑的执行

var axios = {
  get() {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        const obj = {
          obj: {
            data: {
              info: '信息'
            }
          }
        }
  
        resolve(obj)
      }, 500)
    })
  }
}

async function testFn () {
  const { obj: {data} } = await axios.get()

  console.log(data)

  console.log(456)
}

testFn()