vue에서 jsonp를 사용하여 전역 요청 인터페이스 작업

선언:
여기에서 우리가 사용하는 것은 제3자 플러그인 jsonp입니다.
github 웹 주소:https://github.com/webmodules/jsonp
1. 설치
npm install jsonp -S
2. 도입
일반적으로 js 파일을 새로 만들어서 원시 jsonp 플러그인을 도입한 다음에 원시 플러그인을 봉인하고 크로스 인터페이스 파라미터에 대한 연결을 합니다. 이 jsonp 파일을 봉인하고 export를 나가면 어디에서 사용하든지 거기import에 있습니다.
1. 새 jsonp.js 파일로 원본 jsonp 플러그인 봉인

//  jsonp 
import originJsonp from 'jsonp'
/*
  jsonp ， promise 
 url：  
 data： json 
 option： json ， 
*/
export default function jsonp (url, data, option) {
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
 // originJsonp github 
  originJsonp(url, option, (err, data) => {
   if (!err) {
    resolve(data)
   } else {
    reject(err)
   }
  })
 })
}
/*
  url 
 */
function param (data) {
 let url = ''
 for (var k in data) {
  let value = data[k] !== undefined ? data[k] : ''
  //  ，  URI  
  url += `&${k}=${encodeURIComponent(value)}`
 }
 return url ? url.substring(1) : ''
}

3. 사용
인터페이스를 요청하는 js 폴더에 getCurrentCity를 새로 만들 수 있습니다.js 파일은 인터페이스 데이터를 크로스 필드에서 가져옵니다.

//  jsonp
import jsonp from 'common/js/jsonp.js'
//  
export function getCurrentCity () {
 //  
 let url = 'https://api.map.baidu.com'
 //  
 let datas = {
  'qt': 'dec',
  'ie': 'utf-8',
  'oue': 1,
  'fromproduct': 'jsapi',
  'res': 'api',
  'ak': 'QWilijLzYd6pCmTrHilAeWjbG41zMiXc'
 }
 return jsonp(url, datas, {})
}

4. 마지막으로 vue 구성 요소에서 인터페이스 데이터를 가져옵니다.

import {getCurrentCity} from 'common/apis/getCurrentCity.js'

export default {
 methods:{
  _getCurrentCity () {
   //  
    getCityCurrent().then((res) => {
     //  
     console.log(res)
    }).catch((err) => {
     console.log(err)
    })
   }
 },
 mounted () {
   this._getCurrentCity()
 }
}

추가 정보: Vue에서 axios와 jsonp에 대한 포장
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

import qs from 'qs'
import axios from 'axios' 
 
 // 
axios.interceptors.request.use(function (config) {
  console.log(' ...')// loading 
  return config;
}, function (error) {
  return Promise.reject(error);
});
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
  console.log(' ...')
  return response;
}, function (error) {
  return Promise.reject(error);
}); 
 
const ajax={
	post:function(url,data={}){
		return new Promise((resolve,reject)=>{
			axios.post(url,qs.stringify(data)).then(function(res){
				resolve(res.data)
			}).catch(function(err){
				reject(err)
			})
		})
	},
	get:function(url,data={}){
		return new Promise((resolve,reject)=>{
			axios.get(url,{params:qs.stringify(data)}).then(function(res){
				resolve(res.data)
			}).catch(function(err){
				reject(err)
			})
		})
	},
}
export default ajax;

메인js 중
import ajax from './common/api/index.js'
Vue.prototype.$post=ajax.post Vue.prototype.$get=ajax.get
jsonp

import originJSONP from 'jsonp'
/*
jsonp(url,option,callbackFn)
{name:1,age:20}
www.aaa.com/? 
*/
export default function(url,data,option){
 url+=(url.indexOf('?')<0 ? '?' : '&' )+param(data);
 return new Promise(function(resolve,reject){
 originJSONP(url,option,function(err,res){
  if(!err){
   resolve(res);
  }else{
   reject(err)
  }
  })
 })
}
/*
{name='aa',age=20}
&name=aa&age=20
*/
function param(data){
 let url='';
 for(let key in data){
 let item =data[key]!==undefined ? data[key] : '';
 url+=`&${key}=${encodeURIComponent(item)}`
 }
 return url ? url:'';
 }

이상의 이 편은 vue에서 jsonp를 사용하여 전역 요청 인터페이스 조작을 하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.