2.vue2.0 jsonp封装

最新推荐文章于 2024-06-06 12:16:56 发布

奔跑的飞

最新推荐文章于 2024-06-06 12:16:56 发布

阅读量812

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0(音乐app)项目笔记文章标签： html5

本文链接：https://blog.youkuaiyun.com/sinat_29421531/article/details/78506747

vue2.0(音乐app)项目笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Webpack配置文件中设置别名简化路径引用，并详细解析了JSONP的工作原理及其实现方式，包括使用Promise进行封装以提高代码的可维护性和易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面简介+轮播图数据分析

在webpack.base.conf中配置

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'common': resolve('src/common'),
  'components': resolve('src/components'),
  'base': resolve('src/base'),
  'api': resolve('src/api')
}

2.JSONP原理介绍+P封装

代码实现：

jsonp.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export 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) : ''
}

import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'//组件里面是传递数据
import axios from 'axios'

export function getRecommend() {
  const url = ''

  const data = Object.assign({}, commonParams, {
  
  })

  return jsonp(url, data, options)
}