springboot-vue 前后分离，js一个方法调用多个后台方法返回

一、js调用多个后台接口

首先需要先理解一下为什么需要用到这个，这个问题是我在写程序的时候，遇到的就想着写一篇文章记录一下，可能我用到的方法也不是特别的好，希望大家有好的方法可以分享一下。

这里我的需求是在循环中多次调用后台接口，获取数据，修改数据，在保存数据，在获取新的数据，在保存的这个逻辑，但在操作中遇到接口方法调用的阻塞，例如：需求是打印1,2,3,；1，2,3；1,2,3但遇到1,1,1,2,2,2,3,3,3，在循环的过程遇到同一个接口循环完成之后，才进行下一个接口的操作。在网上也找了很多方法，但有些方法运用不行，这里的方法是我个人项目中实际运用过可以使用的。这里我主要运用了async，await和promise，直接看代码吧。

JS

methods:{
    getList(i) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
             //这里插入后台接口的方法
               xxx(xx).then(res=>{
                 resolve(data);
                })                 
        }, 100);
      });
    },
saveData(i){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
             //这里插入后台接口的方法
               xxx(xx).then(res=>{
                 resolve(data);
                })                 
        }, 100);
      });
},

list(){
var _this = this  // 这里需要调用methods里的方法，但在function定义的方法无法直接运用this指向，则这里定义一下
//这里在定义一个function
async function a(){
let frame = await _this.getList(i); //这里有需要的话可以穿参给getList方法中运用
//frame返回promise中resolve中传递的参数回来
let data = _await _this.saveData(i)   // 这里也同理

//添加循环，但有时会遇到调用接口，需求是打印出1,2,3；1,2,3的需求，但打印出1,1,2,2,3,3,这种情况就可以用这个aysnc，await和promise来解决
for(let i = 0;i<5;i++{
//这里调用定义的方法
let frame = await _this.getList(i);
let data = _await _this.saveData(i);
//这里打印出来就是先执行getList()在执行saveData;  满足一次循环中依次执行后台接口返回的数据进行操作。  
}
        }
}
list();
}

第一次写这个文章记录一下自己遇到的问题，希望对大家有所帮助，如果有疑问大家可以在询问。