The first one, used on the current page
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()
}
The second is to extract the synchronous call as a public method to call
1. Ajax encapsulation in api.js
export const getManufacturer = params => get('/cable/cable/xxxx', params)
2. Synchronous call in 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
}
Note: I made a mistake when utils exported the method, as follows
export const searchFns = {
getManufacturerFn: getManufacturerFn(),
XXXX: xxxx()
}
The intention is that when using searchFns.getManufacturerFn, I can get the return value after the synchronous function call, so I don’t need to call the function every time I use it. In my local project, there is really no problem with writing this way, but there is a problem when the customer deploys on-site. All the functions called synchronously are not called after the cookie login expires and after re-login (my local is after re-login will be calling), this kind of problem is very puzzling to myself, I searched for the reason in many ways, and found that it is related to the version of Google Chrome, the customer's on-site version is 67 (intranet computer, the version is unexpectedly old), and the browser version of my computer If it is 107, try to upgrade the browser version of the client's computer. After upgrading to version 107, this strange problem will no longer exist. But later I found that the Google on my computer was not the latest version, so I upgraded to the latest version 110. It turned out that the problem at the customer site appeared again, and the customer site also needed the edge browser to support it. Edge has been tested. It is found that whether it is the old version at the customer's site (the outdated 44 version) or the latest version 110 on my computer, there will be problems of not calling it. Later, after research, I found that there was a problem with my own code writing, which caused some browsers not to support it. The correct way to write it should be to make a function call when using it.
3. Introduce and use on the required page
// 引入
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]) => {
// 其他逻辑代码
})
}
}