vue中用Ajax请求

http>index.js  封装Ajax

function get( url, fn){
  // 原生ajax

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // true 异步 false 同步
  xhr.send();



  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        console.log("结果是：", xhr.responseText);
        let obj= JSON.parse( xhr.responseText );
        console.log(obj);
        
        // 0-----------------返回值怎么办？----
        // return 123;
        fn(obj)

      } else {
        console.log("请求失败", xhr.status);
      }
    }
  };


  
}

export default {
    get
};

原生 home.vue  请求数据        原生--->jq写法回调写法

<template>
  <div>
    <h1>首页页面</h1>
    <p>姓名：{{ res.user }}</p>
    <p>年龄：{{ res.age }}</p>
    {{ res }}
  </div>
</template>


<script>
import $ from "@/http/index.js"
export default {
    data() {
        return {
            res:{}
        }
    },
  // 最早操作data
  created() {
    // this.getUser();
    this.getMyUser();
  },

  methods: {
    getUser() {
      console.log("请求用户数据的方法");
    
  // 原生ajax

      const xhr = new XMLHttpRequest();
      xhr.open("GET", "./1.json", true); // true 异步 false 同步
      xhr.send();

      /*
            //  false 同步

            let  x= xhr.responseText;
            console.log(x);

            console.log("---aaaa----")
    */

     let  _this= this;

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            console.log("结果是：", xhr.responseText);
            let obj= JSON.parse( xhr.responseText );
            console.log(obj);
            
            _this.res = obj;
            // console.log(this);

          } else {
            console.log("请求失败", xhr.status);
          }
        }
      };

    },



    getMyUser(){

      $.get("./1.json",(res)=>{
          console.log("res---",res);
        //   console.log(this)
        this.res=res;
      });
     
    }

  },
};
</script>

直接使用jq category.vue

<template>
    <div>
        <h2>分类页面</h2>
        <p>姓名：</p>
        <p>年龄：</p>
        {{ res }}

    </div>
</template>

<script>
// jquery ajax 
// 1、下载 jquery 模块  npm install jquery
// 2、 载入 import $ from "jquery";
import $ from "jquery";

import myjq from "@/http/myjq.js"
export default {
    data() {
        return {
            res:{}
        }
    },
    created() {
        // console.log($)
        // this.getUser(); 
        this.getMyUser();
    },

    methods: {
        // 原生jq
        getUser(){
            $.get("./1.json",x=>{
                this.res= x;   
            })  
        },
        // promise 封装 jq
        getMyUser(){
            myjq("./1.json").then(xxx=>{
                console.log(xxx);
                this.res=xxx;
            })
        }
    },
}
</script>

jq【回调写法】 --> promise 【.then().then() 同步表达 -避免回调地狱】 user.vue

<template>
    <div>
        <h3>个人中心页面</h3>
    </div>
</template>

<script>
import axios from "axios"
export default {
    created() {
        // this.getUser();
        // this.getMyUser()
        this.getXx();

    },

    methods: {
        // 局部使用
        getUser(){
            /*
            axios({
                url:"./1.json", // get 参数 ?a=1
                method:"get",
                params:{} // get 传递参数  a:1

            })
            */

            axios.get("./1.json",{params:{ }})
            .then( x=>{
                console.log(x)
                console.log(x.data)

            } )

        },

        // 全局使用
        getMyUser(){
            // console.log(this.name)
            this.$http.get("1.json")
            .then(res=>console.log(res))
        },

        async getXx(){
            const d = await this.$http.get("1.json")
            console.log(d)
        }



    },



}
</script>

jq---封装的jq方法

import $ from "jquery";

function myAjax(url){

    return new Promise((resolved,rejected)=>{

        $.get(url,x=>{
            resolved(x);
        })  
    })  

}


export default myAjax;