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>