最近网站添加了搜索图书信息的功能,用到了豆瓣图书API:
https://api.douban.com/v2/book/search?q=${query}
直接输入需要搜索的信息,会出现跨域问题的错误警告,在 nginx
配置未成功,随即转用jsonp
解决,相关函数如下:
// jsonp.js
export function getJSONP(url, cb) {
if (url.indexOf('?') === -1) {
url += '?callback=responseHandler';
} else {
url += '&callback=responseHandler';
}
// 创建script 标签
var script = document.createElement('script');
// 在函数内部实现包裹函数,因为要用到 cb
// responseHandler 为全局变量
window.responseHandler = function (json) {
try {
cb(json)
} finally {
// 函数调用之后,移除对应的标签
script.parentNode.removeChild(script);
}
}
script.setAttribute('src', url)
document.body.appendChild(script);
}
调用:
import { getJSONP } from "../../utils/jsonp";
const onSearch = async (query) => {
const url = `https://api.douban.com/v2/book/search?q=${query}`;
getJSONP(url, e => {
// 回调函数
// e 为通过jsonp获取的数据
console.log(e)
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。