vue 网络请求demo

异步等待demo:

 

axios-demo:

本地数据显示：

 <!-- 本地数据显示 -->
    <ul v-show="isShowNativeResult">
      <li v-for="(data,index) in datas">
        <span>
          {{data.name}}
        </span>
        <span style="margin-left:10px;">
          {{data.address}}
        </span>
      </li>
    </ul>
    <!-- gankio数据 -->
    <ul v-show="isShowGankIoResult">
      <li v-for="(item,index) in gankIoDatas" class="listItem">
        <img :src="item.url" alt="" style="width:200px">
        <span>整理者：{{item.who}}</span>
      </li>
    </ul>

模拟json 请求：

 // 本地请求 json 模拟
    getData() {
      var that = this
      this.$axios.get('../static/mydata.json')
        .then(response =>{
          console.log(response.data)
          if(response.data.status == '0001'){
            that.datas = response.data.datas
            that.isShowNativeResult = true
            that.isShowGankIoResult = false
          }
        })
        .catch(error =>{
          console.log(error)
          that.isShowNativeResult = false
          that.isShowGankIoResult = false
        })
    },

//这里给出真实的服务器的请求：

 getGanData(){
      var that = this
      // 比如到得干货集中营 福利 10 月 1 号的文章列表
      this.$axios.get('http://gank.io/api/data/福利/10/1')
      .then(response =>{
        console.log(response.data)
        that.gankIoDatas = response.data.results
        that.isShowNativeResult = false
        that.isShowGankIoResult = true
      })
      .catch(error =>{
        console.log('error')
        that.isShowNativeResult = false
        that.isShowGankIoResult = false
      })
    }

考虑3：自定义一个ajax 请求事件：

 <div class="hello">
    <button class="mybtn" type="button" name="button" @click="getData">点击请求</button>
    <ul>
      <li v-for="(data,index) in datas">
        <span>
          {{data.name}}
        </span>
        <span style="margin-left:10px;">
          {{data.address}}
        </span>
      </li>
    </ul>
  </div>

 

//局部和全局使用注册添加一个this:

methods:{
    getData() {
      var that = this
      // 全局注册可以添加一个 this
      this.ajax({
  			methods:'GET',
  			url:'../static/mydata.json',
  			data:{},
  			success:function(res){
  				console.log(res)
          console.log('请求成功，成功的状态码是：'+res.status)
  				if(res.status=='0001'){
            that.datas = res.datas
  				}
  			},
  			faile:function(res) {
          console.log(res)
  			}
  		})
    }
  }
}

考虑4： jquery ajax 点击请求

  <ul>
      <li v-for="(data,index) in datas">
        <span>
          {{data.name}}
        </span>
        <span style="margin-left:10px;">
          {{data.address}}
        </span>
      </li>
    </ul>

脚本：

  

methods:{
    getdata() {
      var that = this
      $.ajax({
        type:'GET',
        url:'../static/mydata.json',
        dataType:"json",
        success:function(res){
          if(res.status =='0001'){
            that.datas = res.datas
          }
          console.log(res)
        },
        error:function(error) {
          console.log('error')
        }
      })
    }
  }

 

 

考虑5 ：fetch demo:

<div class="hello">
    <button  class="btn" type="button" name="button" @click="getData">请求本地</button>
    <button  class="btn" type="button" name="button" @click="getGankIO">fetch 请求 gankio 数据</button>
    <!-- 本地请求 -->
    <ul v-show="isShowNativeResult">
      <li v-for="(data,index) in datas">
        <span>
          {{data.name}}
        </span>
        <span style="margin-left:10px;">
          {{data.address}}
        </span>
      </li>
    </ul>

gankio 数据：

 getData() {
      // 本地请求 json
      fetch('../static/mydata.json')
      .then(response =>{
        return response.json()
      })
      .then(myJson=>{
          console.log(myJson)
          if(myJson.status=='0001'){
            this.datas = myJson.datas
            this.isShowNativeResult = true
            this.isShowGankIoResult = false
          }
      })
      .catch(e => {
        console.log('error',e)
        this.isShowNativeResult = false
        this.isShowGankIoResult = false
      })
    },

资源文件：请求文件：
 

<button class="btn" type="button" name="button" @click="getData">点击</button>
     <button class="btn" type="button" name="button" @click="getGanData">请求 gankio 数据</button>
     <!-- 本地数据显示 -->
     <ul v-show="isShowNativeResult">
       <li v-for="(data,index) in datas">
         <span>
           {{data.name}}
         </span>
         <span style="margin-left:10px;">
           {{data.address}}
         </span>
       </li>
     </ul>
     <!-- gankio数据 -->
     <ul v-show="isShowGankIoResult">
       <li v-for="(item,index) in gankIoDatas" class="listItem">
         <img :src="item.url" alt="" style="width:245px">
         <span>整理者：{{item.who}}</span>
       </li>
     </ul>
  </div>

methods:

getData() {
      var that = this
      this.$http.get('../static/mydata.json').then(response =>{
        console.log(response)
        if(response.body.status == '0001'){
          that.datas = response.body.datas
          that.isShowNativeResult = true
          that.isShowGankIoResult = false
        }
      },response => {
        console.log('error')
        that.isShowNativeResult = false
        that.isShowGankIoResult = false
      })
    },