Vue中XMLHttpRequest的使用方法详解

var xhr = new XMLHttpRequest();

xhr.open('GET/POST', url, true); //第三个参数是是否异步请求，默认为true

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        //请求成功
    }
}

xhr.send(data); //data是请求参数，可以是字符串、FormData等

//String类型，返回的响应数据，如果响应内容类型是json，则需要解析
xhr.responseText
 //XMLDocument类型，返回XML格式的响应数据
xhr.responseXML

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: []
      }
    },
    methods: {
      getList() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos', true);
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            this.list = JSON.parse(xhr.responseText);
          }
        }.bind(this);
        xhr.send();
      }
    },
    mounted() {
      this.getList();
    }
  }
</script>