vue项目中使用async和await关键字实现同步请求

第一种，在当前页使用

methods: {
    
    
	async getManufacturerFn2() {
    
    
      let newData = [{
    
    
        label: '全部',
        value: 'all'
      }]
      let res = await post( `/cable/xxxx/find?page=1&pageSize=9999`, [])
      if (res.data.data&&res.data.data.length > 0) {
    
    
        res.data.data.forEach(item => {
    
    
          newData.push({
    
    
            label: item.manufacturer_name,
            value: item.id
          })
        })
      }
      return newData
    },
},
// 调用
mounted() {
    
    
	this.resData = this.getManufacturerFn2()
}

第二种，将同步调用摘取出来作为公共方法来调用

1、api.js中进行ajax封装

export const getManufacturer = params => get('/cable/cable/xxxx', params)

2、utils.js中进行同步调用

import {
    
     getManufacturer } from './../request/api'
export const getManufacturerFn = async () => {
    
    
    let newData = [{
    
    
        label: '全部',
        value: 'all'
    }]
    let res = await getManufacturer()
    if (res.data&&res.data.length > 0) {
    
    
        res.data.forEach(item => {
    
    
            newData.push({
    
    
                label: item.manufacturerName,
                value: item.id
            })
        })
    }
    return newData
}
// 以下代码也可以不再另外导出，此处适用于有多个同步调用函数的情况下，为了避免使用时需要导入多个方法，把所有的方法可以放在一起进行导出
export const searchFns = {
    
    
	getManufacturerFn: getManufacturerFn,
	XXXX: xxxx
}

注意：本人在utils导出方法时犯了个错误，如下

export const searchFns = {
    
    
	getManufacturerFn: getManufacturerFn(),
	XXXX: xxxx()
}

本意是，在使用时，searchFns.getManufacturerFn我就能得到同步函数调用之后的返回值，就不用每次使用都调用一次函数了。在本人本地项目中，这样写也确实没有问题，但是到了客户现场部署时出现个问题，所有同步调用的函数，在cookie登录过期后在重新登录后，都没有进行调用（本人本地是重新登录后都会在调用的），此种问题另自己很是费解，多方查找原因，发现和谷歌浏览器版本有关，客户现场版本为67（内网电脑，版本老的出乎意料），本人电脑浏览器版本为107，就尝试将客户电脑浏览器版本升级，升级到107版本后就没有这个奇怪的问题了。但是后来又发现，本人电脑上的谷歌不是最新版，就手欠的升级到了最新版110，结果发现，又出现了客户现场的那个问题，而且客户现场还需要edge浏览器能支持，edge经测试发现，不管是客户现场的老版本（老掉牙的44版本），还是本人电脑上的110最新版，都会有不调用的问题。再后来经过研究，发现是自己代码写的有问题，导致有些浏览器不支持。正确写法应该在使用时在进行函数调用。

3、在需要的页面来引入使用

// 引入
import {
    
     getManufacturerFn } from './../utils.js'
methods: {
    
    
	init() {
    
    
		this.resData = getManufacturerFn ()
		// 如果同一个页面中有多个同步调用的请求，需要全部调用完成后在执行别的操作，此时可以使用Promise.all()来解决，示例代码如下
		let res1 = fn1()
		let res2 = fn2()
		let res3 = fn3()
		let res4 = fn4()
		Promise.all([res1, res2, res3, res4]).then(([res1, res2, res3, res4]) => {
    
    
			// 其他逻辑代码
		})
	}
}