vue发送Http请求之XMLHttpRequest

浏览器报错：Cannot read property ‘push’ of undefined at XMLHttpRequest.ajaxObj.onreadyst

vue中发送Http请求，这里说明不会使用axios ，baseUrl已经有过了，不想在创建baseUrl，所以采用http请求，请求发送成功。

因为跨域原因，所以内部this不能赋值。
xhr.onreadystatechange = function()导致此引用更改为XMLHttpRequest对象.因此,this.customerArray不再存在.为了避免这种情况,请为原始的this创建新的引用：

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 部门数据，搜索框-->
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-input
            v-model="symbolName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container" style="height:600px">
          <el-scrollbar style="height:700px">
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="datas"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Standard',
  // 把变量作为全局变量初始化（重点）
  treeData: [],
  treeDatas: [],
  data() {
    return {
      // 遮罩层
      loading: true,
      trees: {
        symbolName: '',
        childNodes: []
      },
      datas: [],
      //
      defaultProps: {
        children: 'childNodes',
        label: 'symbolName'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询性能列表 */
    getList() {
      this.loading = false
      // 创建XML请求
      var ajaxObj = new XMLHttpRequest()
      // 以get形式进行发送请求
      ajaxObj.open('get', 'http://192.168.12.76:800/iserver/services/plot-jingyong/rest/plot/symbolLibs/10.json')
      // 请求结束断开
      ajaxObj.send()
      // 初始化变量（必要）
      this.trees = {}
      this.treeData = []
      // 转入： this转为function（）方法内部函数（重点）
      const that = this
      ajaxObj.onreadystatechange = function() {
        if(ajaxObj.readyState === 4 && ajaxObj.status === 200){
          // debugg
          // 请求放回的结果以文本形式，使用JSON.parse()方法进行转为json形式
          var data = JSON.parse(ajaxObj.responseText)
          var item = data.rootSymbolLibNode
          console.log('数据返回成功', data.rootSymbolLibNode)
          that.trees = {
            symbolName: item.symbolName,
            childNodes: item.childNodes,
            symbolNodeType: item.symbolNodeType
          }
          that.treeData.push(that.trees)
        }
      }
      this.treeDatas = that.treeData
      // 转出：内部that指向vue中的this
      this.datas = this.treeDatas
    },
    // 点击树节点
    handleNodeClick(node) {
      console.log(node)
    },
    // 节点筛选
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) > 0
    },
  }
}
</script>