jsonp(options)

优质

小牛编辑

132浏览

2023-12-01

描述

发送 JSON-P 请求。通常，用于与没有开启 CORS，但允许 JSON-P 的服务器进行交互。

m.jsonp({
    url: "/api/v1/users/:id",
    data: {id: 1},
    callbackKey: "callback",
})
.then(function(result) {
    console.log(result)
})

签名

promise = m.jsonp([url,] options)

参数	类型	是否必须	描述
`url`	`String`	否	如果存在该参数，相当于设置了 `{url: url}`。该对象会覆盖 options 中对应的值。
`options.url`	`String`	是	请求会发送到该 URL。该 URL 可以是绝对路径，也可以是相对路径，也可以包含URL 参数。
`options.data`	`any`	否	该数据会被序列化成 querystring，并添加到 URL 中。
`options.type`	`any = Function(any)`	否	响应中的每个对象的构造函数，即得到请求结果后，会先使用该函数进行处理。默认为恒等函数。
`options.callbackName`	`String`	否	回调函数名称。默认为随机字符串（例如，`_mithril_6888197422121285_0({a: 1})`）
`options.callbackKey`	`String`	否	指定回调名称的查询字符串参数名。默认为 `callback`（例如，`/someapi?callback=_mithril_6888197422121285_0`）
返回	`Promise`		在通过 `options.type` 方法处理之后，解析为响应数据的 promise。

工作原理

m.jsonp 工具用于可以返回 JSON-P 格式数据的第三方 API。

JSON-P 会创建一个 script 标签，其 src 属性指向第三方服务器中的脚本。通常，你需要定义一个全局函数，并在脚本的 URL 的 querystring 中指定其名称。响应会返回调用全局函数的代码，并将服务器的数据作为第一个参数传入。

JSON-P 有几个限制：它只能使用 GET 请求，它默认信任第三方服务器不会提供恶意代码，并且它会污染 JavaScript 的全局作用域。尽管如此，在服务器不支持 CORS 时，它是从服务器获取数据的唯一方法。

典型用法

一些服务遵守 JSON-P 的响应格式约定，使用 callback 作为查询字符串的 key，此时 m.jsonp 可以自动工作：

m.jsonp({url: "https://api.github.com/users/lhorie"}).then(function(response) {
    console.log(response.data.login) // logs "lhorie"
})

某些服务不遵守约定，因此必须指定回调名称：

m.jsonp({
    url: "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json",
    callbackKey: "jsoncallback",
})
.then(function(response) {
    console.log(response.link) // logs "https://www.flickr.com/photos/tags/kitten/"
})

有时，你只是想使用 GET 请求的缓存功能：

// 该请求每次调用时 querystring 都相同，因此它会被缓存
m.jsonp({
    url: "https://api.github.com/users/lhorie",
    callbackName: "__callback",
})
.then(function(response) {
    console.log(response.data.login) // logs "lhorie"
})