VUE2.0에서 Jsonp를 사용하는 단계에 대한 자세한 설명

이번에는 VUE2.0에서 Jsonp를 사용하는 단계에 대해 자세히 설명하겠습니다. VUE2.0에서 Jsonp를 사용할 때 주의 사항은 무엇입니까?

1. JSONP의 목적과 원리

JSONP를 사용하는 주요 목적은 동적으로 스크립트를 생성하고, URL을 동적으로 연결한 다음 데이터를 캡처하여 도메인 간을 달성하는 것입니다. 정확히 말하면 AJAX 요청은 동일한 출처로 인해 도메인 간 요청을 할 수 없습니다. 그러나 Script 태그의 src 속성에 있는 링크는 이 기능을 사용하면 서버가 더 이상 반환하지 않습니다. JSON 형식의 데이터이지만 특정 함수를 호출하는 JS 코드 조각을 반환하고 이를 src 속성에서 호출하여 도메인 간을 달성합니다.

2. JSONP 사용 방법

2.1 github에서 jsonp 소개

프로젝트 열기>package.json>"종속성"

"jsonp": "^0.2 . 1" "jsonp": "^0.2.1"

如图所示，然后执行安装cmd指令,并重新运行项目

npm install 
 npm run dev

2.2 封装jsonp.js

import originJSONP from 'jsonp'
export default function jsonp(url, data, option) {
 url += (url.indexOf('?') < 0 ? &#39;?&#39; : &#39;&&#39;) + param(data)
 return new Promise((resolve, reject) => {
 originJSONP(url, option, (err, data) => {
  if (!err) {
  resolve(data)
  } else {
  reject(err)
  }
 })
 })
}
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) : ''
}

目录结构如下：

2.3 jsonp.js的API调用

在src的文件夹下创建api文件夹，用于储存api调用的js，新建config.js和recommend.js两个文件。

config.js
export const commonParams = {
 g_tK: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0
recommend.js
import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
export function getRecommend() {
 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //此处的url可以自行修改，本文是qq音乐链接
 const data = Object.assign({}, commonParams, {
 platform: 'h5',
 uin: 0,
 needNewCode: 1
 })
 return jsonp(url, data, options)
}

目录结构如下：

2.4 recommend.vue文件调用

在项目目录下的src>components>recommend>

에 표시된 대로 그림과 같이 install

cmd 명령을 실행하고 프로젝트를 다시 실행하세요.

<template>
 <p class="recommend">
  recommend
 </p>
</template>
<script type="text/ecmascript-6">
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
 name: 'recommend',
 created() {
 this._getRecommend()
 },
 methods: {
 _getRecommend() {
  getRecommend().then((res) => {
  if (res.code === ERR_OK) {
   console.log(res.data.slider)
  }
  })
 }
 }
}
</script>

2.2 jsonp.js 캡슐화

rrreee

디렉토리 구조

는 다음과 같습니다. 다음:

2.3 jsonp.js API 호출

src 파일에 api가 호출한 js를 저장하기 위해 폴더 아래에 api 폴더를 생성하고, config.js와recommend.js라는 두 개의 새로운 파일을 생성합니다.

rrreee디렉토리 구조는 다음과 같습니다:

🎜🎜2.4recommend.vue 파일은 🎜🎜🎜해당 파일인 .vue🎜🎜recommend.vue🎜rrreee🎜🎜2.5페이지 jsonp 요청 성공 결과🎜🎜🎜🎜 🎜🎜에서 사례를 읽어보신 후 방법을 익히셨으리라 믿습니다. 이 기사를 참조하세요. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜Vue.js에서 테이블을 추가하고 삭제하는 단계에 대한 자세한 설명🎜🎜🎜🎜🎜vue pass router 사용 방법🎜🎜🎜

위 내용은 VUE2.0에서 Jsonp를 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!