首页 > 技术文章 > 多个异步调用的使用

wsongl 2020-07-02 15:30 原文

代码(fun.js):

 1 // 原生的axios
 2 // var axios = require('axios')
 3 export function fun01(name1) {
 4   return new Promise((resolve, reject) => {
 5     axios.get('/api/interface1/xxx', {params: {name: name1}}).then(response => {
 6       // resolve参数的值,其实 tag<这里> 的response的值
 7       resolve(response.data)
 8     }).catch(err => {
 9       reject("01: some error")
10     })
11   })
12 }
13 
14 // request是axios封装的拦截器
15 export function fun02() {
16   return new Promise((resolve, reject) => {
17     request({url: '/api/interface2/xxx', method: 'get'}).then(response => {
18       // resolve参数的值,其实 tag<这里> 的response的值
19       resolve(response.data)
20     }).catch(err => {
21       reject("02: some error")
22     })
23   })
24 }

 

代码(fun.vue):

1 // vue的methods里函数的具体代码
2 import {api_businessline, api_businesslines} from "@/api/cmdb";
3 Promise.all([fun01(), fun02()]).then(response => {
4   // 这里的response值就是上面函数resolve(response.data)中的response.data
5   console.log(response)   // tag<这里>
6 }).catch(err => {
7   // 这里的err值就是上面函数reject("xxx")里的值
8   console.log(err)
9 })

 

 

 多个axios调用

1 this.$axios.all([this.get_hosts(), this.get_dept(), this.get_team(), this.get_spec(), this.get_site()]).then(this.$axios.spread((get_hosts, get_dept, get_team, get_spec, get_site) => {
2         this.hosts = get_hosts.data
3         this.depts = get_dept.data
4         this.teams = get_team.data
5         this.specs = get_spec.data
6         this.sites = get_site.data
7         this.calculate_depts(this.hosts)
8       }))

 

 

.

推荐阅读