发表于： 2019-01-07 03:43:27
2 695
今天完成的事情：
学习vue，跟着视频做一个音乐APP，
使用jsonp（跨域）方法抓取线上qq音乐轮播图数据，
// 封装jsonp方法
import originJSONP from 'jsonp' // 引入jsonp库，自定义命名为 originJSONP
// 传给服务端的是一个地址，url往往是带参数的，jsonp库需要我们把url先拼好，data是url上的一些参数，
export default function jsonp(url, data, option) { // 对外暴露方法jsonp，接收三个参数，和GitHub上的jsonp方法不同
// 将data拼到url上，url要有问号?，如果没有问号，则手动拼上?
// indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引，开始在 fromIndex进行搜索。如果未找到该值，则返回-1。
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
// 我们封装的jsonp方法返回一个promise对象
return new Promise((resolve, reject) => { // promise两个参数（是函数）resolve（成功调用），reject（失败调用）
// 在promise里调用jsonp库的方法，发送jsonp跨域请求
originJSONP(url, option, (err, data) => { // jsonp请求失败err为true，!err则表示请求成功
if (!err) { // jsonp请求成功，调用promise的resolve函数，
resolve(data) // 将jsonp请求成功返回的data放到promise对象上，在外面promise.then()获得返回的数据data
} else {
reject(err) // 失败返回错误信息
}
})
})
}
明天计划的事情：继续音乐APP的跟写，用获得的数据做轮播图部分
遇到的问题：vue2.0使用v-for遍历数据，有warning提示，Elements in iteration expect to have 'v-bind:key' directives
需要加上:key="item.id"
<div class="slider-item" v-for="item in recommends" :key="item.id">
问题解决链接 https://www.cnblogs.com/h2zZhou/p/9639984.html
收获：使用jsonp抓取线上数据
返回列表
评论