详解如何在Vue项目中发送jsonp请求

下面是在Vue项目中发送jsonp请求的详细攻略。

什么是JSONP？

JSONP（JSON with Padding）是一种在前端领域经常使用的跨域请求数据的技术。由于同源策略的限制，浏览器通常不能跨域请求数据，而JSONP是利用<script>标签可以跨域加载资源的特性，实现跨域请求数据的。

JSONP请求的URL地址一般是类似callback=函数名这样的形式，后端返回的数据需要写入回调函数中。因此，在前端定义好回调函数后，后台会将数据以JSON的形式放入该函数中，从而实现数据的请求和处理。

如何在Vue项目中发送JSONP请求？

1. 安装jsonp插件

可以通过npm安装jsonp插件，命令如下：

npm install jsonp --save

1. 在Vue组件中引入jsonp插件

在需要请求JSONP数据的Vue组件中，导入jsonp模块

import jsonp from 'jsonp';

1. 使用jsonp函数，发送JSONP请求

有了jsonp插件后，在Vue组件内，使用jsonp函数发送请求，并使用回调函数处理返回的数据，例如：

jsonp(url, options, (err, data) => {
    if (err) {
        console.error(err.message);
    } else {
        console.log(data);
    }
});

其中，url是JSONP请求的URL地址，options是请求配置参数对象，如下：

• param：JSONP请求的查询参数名称，默认为callback；

• prefix：传递给后台的回调函数名称的前缀，默认为jQuery；

• name：指定回调函数的名称。

• 示例说明

示例1：使用原生jsonp发送请求

我们使用京东开放平台提供的免费API，例如查询iPhone商品信息，请求URL地址如下：

https://apis.m.jd.com/client.action?keyword=iphone&pagesize=10&appid=jd_shop&functionId=product.search&pageindex=1&callback=jsonpCallback

在Vue组件中，采用原生jsonp发送请求，并使用Promise进行封装，如下：

import { Promise } from 'es6-promise';

const BASE_URL = 'https://apis.m.jd.com/client.action?';

function jsonp(options) {
    return new Promise((resolve, reject) => {
        const callbackName = options.callbackName || 'jsonpCallback';
        const script = document.createElement('script');
        const response = {};

        window[callbackName] = function(data) {
            response.ok = true;
            response.data = data;

            document.body.removeChild(script);
        };

        script.onerror = function() {
            reject(new Error(`JSONP request for "${url}" failed.`));
        };

        const url = `${BASE_URL}${options.query}&callback=${callbackName}`;
        script.src = url;

        document.body.appendChild(script);

        setTimeout(function() {
            document.body.removeChild(script);

            if (!response.ok) {
                reject(new Error(`JSONP request for "${url}" failed.`));
            }

            resolve(response.data);
            delete window[callbackName];
        }, options.timeout || 5000);
    });
}

export default jsonp;

使用该函数发送JSONP请求，代码如下：

import jsonp from '@/utils/jsonp';

const options = {
    query: 'keyword=iphone&pagesize=10&appid=jd_shop&functionId=product.search&pageindex=1',
    callbackName: 'jsonpCallback',
    timeout: 5000
};

jsonp(options).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
});

示例2：使用vue-jsonp发送请求

vue-jsonp是一款基于jsonp的前后端跨域库，相较于原生jsonp来说更加简单易用，使用也更加方便。它提供了一个VueJsonp插件，通过注册该插件，在Vue组件中可以直接使用$jsonp方法发送JSONP请求。下面是使用vue-jsonp发送JSONP请求的示例：

import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

this.$jsonp('https://apis.m.jd.com/client.action?keyword=iphone&pagesize=10&appid=jd_shop&functionId=product.search&pageindex=1').then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
});

以上就是在Vue项目中发送JSONP请求的完整攻略，希望对你有所帮助。