时间:2021-05-26
Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功)、Rejected(失败)两个结果。
这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。
new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) }}).then(value=>{ // 成功后操作},error=>{ // 失败后操作 })用Promise封装jsonp方法
import originJSONP from 'jsonp'// 这时候Url是不带参数的,我们让data变成参数,data在具体定义获取具体内容的时候再单独配置export default function jsonp(url, data, option) { // 看url是否有问号的意思就是只在第一次加参数的时候加一个问号,剩下就是加& url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => { originJSONP(url, option, (err, data) => { if (!err) { resolve(data) } else { reject(err) } }) })}// 将data数据遍历,前提data是一个数组function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += `&${k} = ${encodeURIComponent(value)}` } //删除第一个&符号 return url ? url.substring(1) : ''}定义一个重复比较多的配置文件config.js
export const commonParams = { g_tk: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp'}// jsonp默认的options就是jsonpCallbackexport const options = { param: 'jsonpCallback'}export const ERR_OK = 0然后再进行获取页面方法的封装
import jsonp from 'common/js/jsonp'import { commonParams, options } from './config'export function getRecommend() { // 获取qq音乐的地址 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' // object.assign()方法来合并commonParams对象和后面的对象 const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }) // 最后返回的是 return jsonp(url, data, options)}再相应组件中进行调用
<script>import { getRecommend } from 'api/recommend'import { ERR_OK } from 'api/config'export default { created() { this._getRecommend() }, methods: { _getRecommend() { getRecommend().then(res => { if (res.code === ERR_OK) { console.log(res.data.slider) } }) } }}</script>然后就可以在控制台获得数据了
总结
以上所述是小编给大家介绍的vue中利用Promise封装jsonp并调取数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue中的交互(ajax,jsonp)vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西
一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中
下载jsonpnpminstalljsonp在js文件夹下新增一个jsonp.js,来封装一个jsonp()如何封装一个jsonp()在下载的jsopn中,js
现在应该大部分公司都是前后端分离了。so,数据请求的封装还是必须的。为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise
请求数据的方式:vue-resource官方提供的vue的一个插件axiosfetch-jsonp一,vue-resource请求数据介绍:vue-resour