vue中異步數(shù)據(jù)獲取方式是什么

今天給大家介紹一下vue中異步數(shù)據(jù)獲取方式是什么。文章的內(nèi)容小編覺得不錯，現(xiàn)在給大家分享一下，覺得有需要的朋友可以了解一下，希望對大家有所幫助，下面跟著小編的思路一起來閱讀吧。

vue中異步數(shù)據(jù)獲取

1、獲取異步數(shù)據(jù)，通過async/await限制 

import { fetchList } from '@/api/article'
//在created中即開始獲取
created() {
    this.getList()
}
methods：{
    async getList() {
      this.listLoading = true
      
      //ES6寫法，與then方法鏈?zhǔn)秸{(diào)用相同，但比較簡潔直觀
      //const的寫法，保證原數(shù)據(jù)不被更改
      const { data } = await fetchList(this.listQuery)
      
      //被await阻塞的代碼
      const items = data.items
      this.list = items.map(v => {
      })
      this.listLoading = false
    },
}

eg1:

    changeA(){
      return  3
    },
    async getAsync(){
      let a = 1
      a = await this.changeA()
      console.log(a)   //打印結(jié)果為3
    },
    //changeA中沒有異步操作，程序從上往下執(zhí)行

eg2:

    async changeA(){
     let a  =22
     await  setTimeout(()=>{
       console.log('異步中')
       a = 33
     })
     console.log('異步結(jié)果')
     return a
    },
    async getAsync(){
      let a = 1
      await this.changeA()
      console.log(a)  
    },
     //打印結(jié)果為 
     異步結(jié)果
     22             //a的結(jié)果
     異步中
     //結(jié)論await并未阻塞異步的代碼

eg3:

    changeA(){
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('異步')
          resolve()
        },2000)
      })
    },
    async getAsync(){
      await this.changeA()
      console.log('同步')   
    },
    //兩秒后打印結(jié)果 
    異步
    同步
    //結(jié)論：成功阻塞代碼

eg4:

    changeA(){
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('異步')
          resolve()
        },2000)
      })
    },
    async getAsync(){
      this.changeA()
      console.log('同步')   
    },
    //先打印同步，兩秒后打印異步

總結(jié)：當(dāng)await后面跟的函數(shù)存在異步且返回promise的時候，才會阻塞之后的同步代碼，由上述eg可以印證

tips:

async函數(shù)也會立即返回一個promise對象

2、將一個方法的返回值

返回promise函數(shù)，可以在該方法結(jié)束后，使用鏈?zhǔn)浇Y(jié)構(gòu)

methods:{
     getProfile(id) {
          let query = {
            aid: id
          };
          //返回一個promise對象
          return new Promise(async resolve => {
                 const {data} = await api.getProfileList(query)
                 //被await阻塞的同步代碼
              this.profileList = data;
              this.graphical(this.dataX, this.dataY);
              resolve();
          });
        },
 //當(dāng)?shù)玫劫x值的時候，再打開彈窗
        this.getProfile(aid).then(() => {
          this.dialogVisible3 = true;
        });
}

vue處理數(shù)據(jù)（同步，異步）問題簡單記錄

情況介紹

后端返回該地址的坐標(biāo)經(jīng)緯度，需要前端用百度地圖api處理成詳情地址

處理過程在遍歷中直接引入

處理完數(shù)據(jù)后返回并綁定到el-table列表

通過打印發(fā)現(xiàn)getLocation()方法響應(yīng)過慢，導(dǎo)致數(shù)據(jù)渲染時該字段為空

最終解決方法：new Promise()

抽離出處理數(shù)據(jù)的方法，用異步處理方式返回

返回的之中存在空值。。。

所以。。。。。在外層調(diào)用時同樣需要異步操作

因?yàn)楂@取詳情地址的方法是逐條處理的，所以在調(diào)用的外層進(jìn)行了遍歷

以上就是vue中異步數(shù)據(jù)獲取方式是什么的全部內(nèi)容了，更多與vue中異步數(shù)據(jù)獲取方式是什么相關(guān)的內(nèi)容可以搜索億速云之前的文章或者瀏覽下面的文章進(jìn)行學(xué)習(xí)哈！相信小編會給大家增添更多知識,希望大家能夠支持一下億速云！