组件里多个使用vue-resource发起多个ajax请求会有一个请求报错。

Question

用vue写的一个首页，里面有轮播和广告部分，
轮播用的vue-resource发起了一个ajax请求
广告部分比较多 发起了5个ajax请求，
控制台network显示6个请求都正常，但是会多一个请求错误，报错内容在下方

vue-resource的写法比较麻烦 多个要写很多代码，于是封装成js了

import Vue from 'vue'
import vueResource from 'vue-resource'
Vue.use(vueResource)

export default (CodeArr, Timestamp, Sign, DateName, _this) => {
  Vue.http.get('http://ad.api.t.xxx.net/v1/position?CodeArr=' + CodeArr + '&LBSLongitude=113.9109898&LBSLatitude=22.494454&PartnerId=U001&Timestamp=' + Timestamp + '&Sign=' + Sign, {},
    {headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    emulateJSON: true
  }).then(function (response) {
    var data = response.json().Content[0].Content[0]
    _this[DateName] = data
  }, function (response) {
    console.log('请求失败response', response)
  })
}

template部分

<template>
    <div class="recommend">
        <div class="title-box">
          <span class="recommend-title">今日推荐</span>
        </div>
        <div class="recommend-body">
            <div class="recommend-left">
                <div class="recommend-item item1">
                    <a href="">
                        <img v-bind:src="FliePath + imgLeft1.AdFile" alt="">
                    </a>
                </div>
                <div class="recommend-item item2">
                    <a href="">
                        <img v-bind:src="FliePath + imgLeft2.AdFile" alt="">
                    </a>
                </div>
            </div>
            <div class="recommend-right">
                <div class="recommend-item item3">
                    <a href="">
                        <img v-bind:src="FliePath + imgRight1.AdFile" alt="">
                    </a>
                </div>
                <div class="recommend-item item4">
                    <a href="">
                        <img v-bind:src="FliePath + imgRight2.AdFile" alt="">
                    </a>
                </div>
                <div class="recommend-item item5">
                    <a href="">
                        <img v-bind:src="FliePath + imgRight3.AdFile" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="division-10"></div>
    </div>
</template>

完整js ajax部分

import Vue from 'vue'
import VueAsyncData from 'vue-async-data'
import signCalc from '../libs/signCalc.js'
import vueAjax from '../libs/vueAjax.js'

Vue.use(VueAsyncData)

let CodeArr1 = 'U01001_find009'
let CodeArr2 = 'U01001_find012'
let CodeArr3 = 'U01001_find010'
let CodeArr4 = 'U01001_find011'
let CodeArr5 = 'U01001_find013'

let Timestamp = Math.round(new Date().getTime() * 10000 + 621355968000000000)

let leftImg1 = signCalc(CodeArr1, Timestamp)
let leftImg2 = signCalc(CodeArr2, Timestamp)
let rightImg1 = signCalc(CodeArr3, Timestamp)
let rightImg2 = signCalc(CodeArr4, Timestamp)
let rightImg3 = signCalc(CodeArr5, Timestamp)

export default {
  ready () {
    console.log('recommend hot ready')
  },
  asyncData (resolve, reject) {
    let _this = this
    vueAjax(CodeArr1, Timestamp, leftImg1, 'imgLeft1', _this)
    vueAjax(CodeArr2, Timestamp, leftImg2, 'imgLeft2', _this)
    vueAjax(CodeArr3, Timestamp, rightImg1, 'imgRight1', _this)
    vueAjax(CodeArr4, Timestamp, rightImg2, 'imgRight2', _this)
    vueAjax(CodeArr5, Timestamp, rightImg3, 'imgRight3', _this)
  },
  data () {
    return {
      imgLeft1: {},
      imgRight1: {},
      imgLeft2: {},
      imgRight2: {},
      imgRight3: {},
      FliePath: 'http://files.t.xxx.net/'
    }
  }
}

最后预览的时候页面会有个请求报错

GET http://files.t.xxx.net/undefined 404 (Not Found) undefined:1

无论我是把轮播部分注释掉不加载 还是把广告部分注释不加载 最后都是会产生这个报错。
有木有人遇到过。

Answer 1

img 那块，组件渲染时 imgRightX.adFile 未定义