jsonp.js

// 对jsonp进行封装
// 引入jsonp
import jsonp from 'jsonp';

/*
   目的是将
   param相当于{}对象
   {
       page:1,
       psize:20
   }
   转换成page=1&psize=20

*/
const parseParam = param => {
   let params = [];
   for(const key in param){
       // 将上方param对象变成[[page, 1], [psize, 20]]
       params.push([key, encodeURIComponent(param[key])]);
       // params.map(value => value.join('='))将上一步的param对象变成[page=1, psize=20]
       // 在后边加上.join('&')就将[page=1, psize=20]转换成page=1&psize=20了
       return params.map(value => value.join('=')).join('&');
   }
}

export default (url, data, options) => {
   //判断路径是否有问号，如果没有?就加个?，如果有?直接加&连字符  (url.indexOf('?') < 0 ? '?' : '&')
   url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);
   return new Promise((resolve, reject) => {
       jsonp(url, options, (err, data) => {
           if(err){
               // 如果有错误，调reject
               reject(err);
           }else{
               // 如果没错误，调resolve
               resolve(data);
           }
       })
   })
}

api下的config.js

//定义调用数据之后成功的code码
export const SUCC_CODE = 0;

//定义获取数据超时的毫秒数
export const TIMEOUT = 10000;

//定义推荐下的每页的条数
export const HOME_RECOMMEND_PAGE_SIZE = 20;

export const jsonpOptions = {
   param: 'callback',
   timeout: TIMEOUT
}

home.js下的

// 引入jsonp
import jsonp from 'assets/js/jsonp';
import {SUCC_CODE, TIMEOUT, HOME_RECOMMEND_PAGE_SIZE, jsonpOptions} from './config';

// 获取热门推荐数据 --jsonp
export const getHomeRecommend = (page = 1, psize = HOME_RECOMMEND_PAGE_SIZE) => {
   const url = 'https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';
   const params = {
       page,
       psize,
       type: 0,
       frontCatId: ''
   };
   return jsonp(url, params, jsonpOptions).then(res => {
       if(res.code === '200'){
           return res;
       }

       throw new Error('没有成功获取到数据！');
   }).catch(err => {
       if(err){
           console.log(err);
       }
   }).then(data => {
       return new Promise(resolve => {
           setTimeout(() => {
               resolve(data);
           },1000);
       });
   })
}

recommend.vue下的

<template>
   <div class="recommend">
       <h3 class="recommend-title">热卖推荐</h3>
       <div class="loading-container" v-if="!recommends.length">
           <me-loading inline></me-loading>
       </div>
       <ul class="recommend-list" v-else>
           <li class="recommend-item"
               v-for="(item, index) in recommends"
               :key="index"
           >
               <router-link class="recommend-link"
                   :to="{name: 'home-product', params: {id: item.baseinfo.itemId}}"
               >
                   <!--
                       用法：
                       将:src换成v-lazy
                   -->
                   <p class="recommend-pic"><img v-lazy="item.baseinfo.picUrlNew" class="recommend-img" alt=""></p>
                   <p class="recommend-name">{{item.name.shortName}}</p>
                   <p class="recommend-origPrice"><del>￥{{item.price.origPrice}}</del></p>
                   <p class="recommend-info">
                       <span class="recommend-price">￥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
                       <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
                   </p>
               </router-link>
           </li>
       </ul>
   </div>
</template>

<script>
   //  引入组件
   import {getHomeRecommend} from 'api/home';
   import MeLoading from 'base/loading';
   export default {
       name: 'HomeRecommend',
       components:{
           // 注册组件
           MeLoading
       },
       data(){
           return{
               recommends: [],
               curPage: 1,
               totalPage: 1
           }
       },
       created(){
           // 调用组件
           // 获取第一页的数据
           this.getRecommend();
       },
       methods: {
           getRecommend(){
               if(this.curPage > this.totalPage){
                   return Promise.reject(new Error('没有更多了'));
               }
               return getHomeRecommend(this.curPage).then(data => {
                   return new Promise(resolve => {
                       if(data){
                           console.log(data);
                           this.curPage++;
                           this.totalPage = data.totalPage;
                           this.recommends = this.recommends.concat(data.itemList);
                           //等异步数据加载完更新滚动条
                           this.$emit('loaded', this.recommends);
                           resolve();
                       }
                   })
               })
           }
       }
   }
</script>