vue中利用Promise封装jsonp并调取数据

2024-08-01 12:44:10

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就是jsonpCallback
export 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并调取数据,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

详解vue-resource promise兼容性问题

背景其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结:于是乎今天踩到了自己埋的坑,所以决定记录一下.那么到底是什么问题呢?就是"在安卓低版本,如果你在vue项目中使用了vue-resource(vue-resource是什么?它是一个具有ajax功能的第三方npm包),那么http请求和响应都是正常的,但是,注意,但是来了啊!!但是响应进不去promise回调",下面我们来具体看一下正题一.Vue Resource如何使用? 大家都知道,我们在v
Vue ElementUi同时校验多个表单(巧用new promise)

前言有ABCD四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise. 实现的方法有很多种,我讲下自己觉得比较优雅的方式,欢迎各位大大的指正哈. 代码 let formArr=['formA','formB','formC','formD']//假设这是四个form表单的ref var resultArr=[]//用来接受返回结果的数组 var _self=this function checkForm(formName) { //封装验证表单的函数 va
vue+axios+promise实际开发用法详解

axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法 axios特点 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 (就是有interceptor) 5.转换请求数据和响应数
Vue2.0 vue-source jsonp 跨域请求

本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex
vue-resource调用promise取数据方式详解

用了好久的vue-resource,好像每一次使用的时候,都要去看一下上一次是怎么写的,具体的语法过不了多久又忘记了,甚至不知道其中的原理,只知道一些简单的使用,一会儿用ES6的语法,一会儿又用传统的语法,为了改变这种不良的习惯,并理清vue-resource使用promise取数据的原理,今天把这一块整理一下. 先来说说 vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的
基于vue-resource jsonp跨域问题的解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就
VUE2.0中Jsonp的使用方法

本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的
解决vue项目报错webpackJsonp is not defined问题

在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',
Vue Promise的axios请求封装详解

现在应该大部分公司都是前后端分离了.so,数据请求的封装还是必须的. 为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象. var p1 = New promise((resolve,reject)=>{ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut <
vue中利用Promise封装jsonp并调取数据

Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败)两个结果. 这两个结果不会改变.然后结果结束后就会用then来执行相应的结果. new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成
Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

统一捕获接口报错弹窗提示报错重定向基础鉴权表单序列化实现的功能统一捕获接口报错 : 用的axios内置的拦截器弹窗提示: 引入 Element UI 的 Message 组件报错重定向: 路由钩子基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写用法及封装用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入
vue中axios的封装问题(简易版拦截,get,post)

第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')
关于Vue中axios的封装实例详解

前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一
vue中如何简单封装axios浅析

把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti
在Vue中是如何封装axios

目录 1.安装 1.引入 3.接口根地址 4.使用事例 4.1下载 4.2get 4.3post 1.安装 npm install axios; // 安装axios 1.引入 import axios from 'axios' 3.接口根地址 const baseUrl = API_BASE_URL // 由webpack的插件DefinePlugin注入 webpackConfig .plugin('define') .use(require('webpack/lib/DefinePlugi
Vue中Axios的封装与接口管理详解

目录一. Axios 的封装安装 Axios 引入接口管理统一暴露接口在组件中使用补充:封装get方法和post方法总结一. Axios 的封装在 Vue 项目中,和后台进行数据交互是频繁且不可或缺的,刚开始没进行 Axios 封装的时候,每次请求后台数据都是写的完整的路径,特别长,尤其是基准地址,每次都要复制一遍加在前面,冗余特别大.封装完 Axios 后,调用接口就简短多了,如果后期出现基准地址的改变,只需要在配置中更改一次即可. 安装 Axios npm install
vue中Axios的封装和API接口的管理示例详解

目录一.axios的封装安装引入环境的切换设置请求超时 post请求头的设置请求拦截响应的拦截封装get方法和post方法 axios的封装基本就完成了,下面再简单说下api的统一管理. 2018.8.14更新我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js
vue中利用simplemde实现markdown编辑器（增加图片上传功能）

前言最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传最终效果安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si
在vue中利用v-html按分号将文本换行的例子

最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作. 如下: 换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后: 雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: <p class="bgnr-txt" v-html="change(content)"> js: m

vue中利用Promise封装jsonp并调取数据

相关推荐

随机推荐