promise.all.then() 后如何resolve 数组data
问题描述
promise.all(promises);promises是一个请求数组,希望请求完后可以resolve数据,但是并没有成功。
问题出现的环境背景
首页有5个get请求,axios超时拦截显示一个div,点击重新发起请求,但是前台页面接收到只有最后一个请求的response,所以我把请求放在一个数组里了,用promise.all发起,但是无法resolve数据
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
import Axios from 'axios'
import Qs from 'qs'
import Vue from 'vue'
Axios.defaults.timeout = 500
var configArr=[]
const request = (options) => new Promise((resolve, reject) => {
const page404 = (config) => {
var Arr = [config];
if(configArr.length>0){
if(Arr.indexOf(configArr)<0){
configArr.push(config);
}
}else{
configArr.push(config);
}
var configarr=[];
for(var i=0;i<configArr.length;i++){
if(configarr.indexOf(configArr[i])<0){
configarr.push(configArr[i]);
}
}
document.getElementById('loadAgain').style.display='block';
let c = Vue.extend({
template:'<div id="loadAgain" @click="loadAgain"><div class="loadBox"><img src="static/img/woply_404@2x.png"/></div><p class="load-p">网络不给力</p><p class="load-p">点击屏幕,重新加载</p></div>',
methods: {
loadAgain() {
configArr=[];
let promises=[];
let result=[];
for(let i=0;i<configarr.length;i++){
promises.push(new Promise((resolve1, reject1) =>{
return request(configarr[i]).then((res) => {
if (typeof res == 'string') {
res = JSON.parse(res)
}
result.push(res);
resolve1(res);
})
.catch((err) => {
})
resolve1(result)
}))
}
Promise.all(promises).then(resultArray => {
console.log(result);
console.log(resultArray);
resolve(resultArray)
})
result=[];
configarr=[]
document.getElementById('loadAgain').style.display='none';
}
}
})
new c().$mount('#loadAgain');
}
Axios.interceptors.response.use((response) => {
//卸载404组件
document.getElementById('loadAgain').style.display='none';
return response;
}, (error) => {
let config=error.config;
if(error.code=='ECONNABORTED'&& error.message.indexOf('timeout')!=-1){
//超时处理
document.getElementById('loadAgain').style.display='block';
page404(config);
}
if(error.message.indexOf('Network')!=-1){
//网络异常
setTimeout(function(){
page404(config);
},5000)
}
return Promise.reject(error);
});
Axios.request(options)
.then((res) => {
if (typeof res == 'string') {
res = JSON.parse(res)
}
resolve(res)
})
.catch((err) => {
})
})
export default {
get: (URL,options) => new Promise((resolve, reject) => {
return request(Object.assign({}, options, { method: "get" ,url:URL})).then(res => {resolve(res)})
}),
post: (URL,params,options) => new Promise((resolve, reject) => {
return request(Object.assign({}, options, {
method: "post",
url:URL,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
data:params,
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
})).then(res => {resolve(res)})
})
}
你期待的结果是什么?实际看到的错误信息又是什么?
resolve后首页的请求可以拿到response,但是并没有到那里
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论