Vue学习13----数据请求模块fetch-jsonp

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88993542

第三方提供的数据请求模块
文档：https://www.npmjs.com/package/fetch-jsonp

fetch-jsonp使用方法
1.安装模块
cnpm install fetch-jsonp --save
2.在使用的文件中引用
import fetchJsonp from ‘fetch-jsonp’;
3.根据api使用

App.vue代码：

<!--参考文档：-->
<!--https://www.npmjs.com/package/fetch-jsonp-->
<template>
  <div>
    <button @click="httpGetData()">请求数据</button>
    <br>
    <ul>
      <li v-for="item in list">

        {{item.title}}
      </li>
    </ul>

  </div>
</template>

<script>
  /*
  fetch-jsonp使用方法
  1.安装模块
   cnpm install fetch-jsonp  --save
  2.在使用的文件中引用
  import fetchJsonp from 'fetch-jsonp';
  3.根据api使用
   */
  import fetchJsonp from 'fetch-jsonp';

  export default {
    name: 'app',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        list:[],
      }
    },
    methods: {
      httpGetData() {
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
        fetchJsonp(api, {
          method: 'GET',
        })
        .then(response=> {
          return response.json()
        }).then(json=> {
          console.log('parsed json >>>', json)
          this.list=json.result;
        }).catch(ex=>{
          console.log('parsing failed', ex)
        })

      }
    }
  }
</script>

<style lang="scss">

</style>

源码下载：