prefacio
En el desarrollo de proyectos de Vue, a menudo nos encontramos con que los datos básicos requeridos para la representación de componentes pueden necesitar enviar muchas solicitudes al fondo. En este momento, obviamente no es razonable que los enviemos uno por uno. Generalmente, usamos axios Método .all() para el procesamiento de solicitudes concurrentes
formato estandar
Aquí está el formato generado automáticamente al eliminar axios.all (instalé el complemento) en VsCode. Se puede ver que axios.all recibe un parámetro de matriz y se basa en la promesa. Generalmente procesamos solicitudes simultáneas
y definitivamente no es el retorno real Los datos devueltos deben procesarse, por lo que la función de axios.spread es procesar los datos devueltos.
axios.all([callback1,callback2])
.then(axios.spread((res1, res2)=>{
}))
Otro formato es
axios.all([]).then(
result => {}
)
el caso
Este es el ejemplo dado en el tutorial de novato.
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
El siguiente es un ejemplo que escribí durante mi propio desarrollo.
async getMenuList() {
let sendArr = [
// 这里是因为我在main.js上将axios挂载到了$http
this.$http.get('menus'),
this.$http.get('users', {
params: this.queryInfo
})
]
this.$http.all(sendArr).then((result) => {
const {
data: res1 } = result[0]
const {
data: res2 } = result[1]
console.log(res2)
if (res1.meta.status !== 200) {
return this.$message.error(res1.meta.msg)
}
this.menuList = res1.data
if (res2.meta.status !== 200) {
return this.$message.error(res2.meta.msg)
}
this.userList = res2.data
})
// const { data: res } = await this.$http.get('menus')
// if (res.meta.status !== 200) {
// return this.$message.error(res.meta.msg)
// }
// this.menuList = res.data
}