第一种,在当前页使用
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]) => {
// 其他逻辑代码
})
}
}