(vue)在ajax获取数据时使用loading组件不起作用_el-button loading效果不显示

问题描述：

在用ajax获取数据时 页面没有变化，想用一个loading图标在获取数据时显示，获取完成后隐藏

整个系统用到了vue框架，在执行sure方法时调用ajax函数

 sure() {
          console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat );
          console.log("s:" + this.st + " " + "e:" + this.et);
          this.getAjaxData();
          this.checkData();
          this.addPointSure();
      }, //sure
1
2
3
4
5
6
7

getAjaxData():获取接口数据

 getAjaxData() {
          $.ajax({
            type: "get", //get post
            async: false, //true false
            url:"***************"
            data: "",
            dataType: "json", 
            crossDomain: true,
            success: function(data){
              lngarr = [];
              latarr = [];
              $.each(data, function (i, val) {
                lngarr[i] = val['lon'];
                latarr[i] = val['lat'];
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log("请求对象XMLHttpRequest: " + XMLHttpRequest.status);
              console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
              console.log("错误类型textStatus: " + textStatus);
              console.log("异常对象errorThrown: " + errorThrown);
            }
          });
      },  //获取接口数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

checkData():检查数据是否获取到

checkData() {
        if(lngarr.length===0){
          alert("该范围内没有数据");
          for(var i = 0; i < this.overlays.length; i++){
            this.map.removeOverlay(this.overlays[i]);
          }
          this.overlays.length = 0;
          classFlag = false;
          hasFlag = false;
        }
        else{
          alert("数据获取成功，共"+lngarr.length+"条数据");
        }
      },  //检查范围内是否有数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14

addDataSure():添加数据

addPointSure(){
        if (document.createElement('canvas').getContext) {
          for (var i = 0; i < lngarr.length; i++) {// 添加海量点数据
            marker.push(new BMap.Point(lngarr[i], latarr[i]));
          }

          var options = {size:BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_CIRCLE, color:"yellow",};
          var pointCollection = new BMap.PointCollection(marker, options);
          this.map.addOverlay(pointCollection );

          pointCollection.addEventListener("click", function(e) {
            var id = ""; var text = ""; var time = "";
            for (var i = 0; i < lngarr.length; i++) {
              if (lngarr[i] === e.point.lng && latarr[i] === e.point.lat) {
                id = ID[i]; text = datatext[i]; time = datatime[i]; break;
              }
            }

            var opts = {
              enableMessage: false,//设置允许信息窗发送短息
              backgroundColor:" transparent",
              border:"0",
              color:"#ffffff"
            };
            var infowindow = new BMap.InfoWindow("ID:" + id + "<br/>time:" + time + "<br>text:"+ text , opts);
            var point = new BMap.Point(e.point.lng, e.point.lat);
            this.map.openInfoWindow(infowindow,point);
          });
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

loading采用的Element-ui中的loading组件
Element ui Loading
按照官方文档提示先将组件装好

import { Loading } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
1
2

这里我新建了一个loading.js文件，将方法先写好，之后直接调用

import { Loading } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

let loading = null;
const showLoading = (params) => {
  console.log('showLoading');
  if(loading) {
    loading.close()
  }
  let options = {
    fullscreen: true,
    target: document.querySelector('#mainLoad'),
    lock: true,
    text: '数据加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  };
  Object.assign(
    options,
    params
  );
  loading = Loading.service(options)
};
const hideLoading = () => {
  console.log('closeLoading');
  loading.close()
};
export {
  showLoading,
  hideLoading
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

返回showLoading，hideLoading两个函数
然后在组件中

import { showLoading, hideLoading } from './loading'
1

原先的想法是在ajax前showLoading，在ajax后hideLoading，即

发现不起作用，查看控制台 确实执行了函数

将hideLoading函数注释掉发现 loading在添加点完成后才出现

解决方法：

1.同步和异步

（1）当把async设为false时，即同步请求。这个时候ajax块发出请求后，会停留在success{}中，不会去执行后面的所有函数（checkPoint，addPointSure），直到success{}部分执行完毕。

（2）当把async设为true时，即异步请求。ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success。

因此先将async设为true

async: true, 
1

这时出现了第二个问题，返回的数据长度为0，也就是没有获取到数据

2.查看函数的执行顺序

在所有的函数执行都打印相应函数名称，便于知道函数的执行顺序
尤其是在succecc函数中打印

console.log('success');
1

查看控制台结果

可以看到success是最后执行的，也就是说在success执行结束前前台去跑后面两个函数是没有数据的，因此将这两个函数放在success中即可

最终代码

sure() {
          console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat );
          console.log("s:" + this.st + " " + "e:" + this.et);
          this.getAjaxData();
          this.checkData();
          this.addPointSure();
      }, //sure
1
2
3
4
5
6
7

 getAjaxData() {
        showLoading();
        console.log('getajaxData');
        var that = this;
          $.ajax({
            type: "get", //get post
            async: true, //true false
            url:"*************",
            data: "",
            dataType: "json", 
            crossDomain: true,
            success: function(data){
              lngarr = [];
              latarr = [];
              $.each(data, function (i, val) {
                lngarr[i] = val['lon'];
                latarr[i] = val['lat'];
              });
              console.log('success');
              that.checkData();
              that.addPointSure();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log("请求对象XMLHttpRequest: " + XMLHttpRequest.status);
              console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
              console.log("错误类型textStatus: " + textStatus);
              console.log("异常对象errorThrown: " + errorThrown);
            }
          });
      },  //获取接口数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

addPointSure(){
        console.log("addPoint");
        if (document.createElement('canvas').getContext) {
          for (var i = 0; i < lngarr.length; i++) {// 添加海量点数据
            marker.push(new BMap.Point(lngarr[i], latarr[i]));
          }

          var options = {size:BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_CIRCLE, color:"yellow",};
          var pointCollection = new BMap.PointCollection(marker, options);
          this.map.addOverlay(pointCollection );

          pointCollection.addEventListener("click", function(e) {
            var id = ""; var text = ""; var time = "";
            for (var i = 0; i < lngarr.length; i++) {
              if (lngarr[i] === e.point.lng && latarr[i] === e.point.lat) {
                id = ID[i]; text = datatext[i]; time = datatime[i]; break;
              }
            }

            var opts = {
              enableMessage: false,//设置允许信息窗发送短息
              backgroundColor:" transparent",
              border:"0",
              color:"#ffffff"
            };
            var infowindow = new BMap.InfoWindow("ID:" + id + "<br/>time:" + time + "<br>text:"+ text , opts);
            var point = new BMap.Point(e.point.lng, e.point.lat);
            this.map.openInfoWindow(infowindow,point);
          });
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

checkData() {
        console.log("checkData");
        hideLoading();
        if(lngarr.length===0){
          alert("该范围内没有数据");
          for(var i = 0; i < this.overlays.length; i++){
            this.map.removeOverlay(this.overlays[i]);
          }
          this.overlays.length = 0;
          classFlag = false;
          hasFlag = false;
        }
        else{
          alert("数据获取成功，共"+lngarr.length+"条数据");
        }
      },  //检查范围内是否有数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16