可恢复的jsonp请求vanilla js

Question

我学习面向对象的编程并遇到了一个我不确定如何处理的问题。当用户第一次登陆页面时，我有一个jsonp请求命中第三方服务器。当用户使用搜索字段时，会触发另一个jsonp请求。正如您所看到的，我有jsonp请求的重复代码。我如何重构以使单个查询可以重复使用？此外，这是我尝试使我的代码可重用，但没有成功https://jsfiddle.net/8k3f7b1v/

function defaultUrl() {
 return 'https://api.twitch.tv/kraken/search/streams?q=mario&callback=appendResults'
}

var script = document.createElement('script')
script.src = defaultUrl()

script.onload = function() {
 this.remove()
}

var head = document.getElementsByTagName('head')[0]
head.insertBefore(script, null)

var form = document.getElementById('search-container-form')
var searchField = document.getElementById('search').value

function makeUrl(query) {
 return `https://api.twitch.tv/kraken/search/streams?q=${query}&callback=appendResults`
}

form.addEventListener('submit', function(e) {
 e.preventDefault()

var searchField = document.getElementById('search').value

if(searchField !== '') {
 var script = document.createElement('script')
 script.src = makeUrl(searchField)

script.onload = function() {
  this.remove
}

var head = document.getElementsByTagName('head')[0]
head.insertBefore(script, null)
}
})

window.appendResults = function(data) {
// manipulate data here 
}