-
2017-10-29 00:00
- 11
- 31
- 0
各位大神,
事情是这样的, 目前要调用api来get数据,
但是这个api的endpoiont里头带有参数, 而这些参数是无序的
所以说, 必须先get到参数, 再将他们传到目标url里面, 才抓到的目标的数据
状况大概是这样的：
我目标是要做一个列表, 列出同学们的身高、体重、姓名
这个api是长这样的
/students/?studentid={studentid}
---
[{
name: '王小明',
height: '175cm',
weight: 60
}]因为有一个班有50位同学, 所以我必须先从另一个端点用50次请求得到这50位同学的id,
再分别将id 传入 这个url 再做 50次请求, 得到一个一个同学的资讯, 再分别将这些资讯push到一个array（students) 中, 使这个array拥有50位同学的资讯（50笔）
（vue）
---
this.$http.get(`/students/?studentid=${1~50}`).then(
response => {
this.students.push(各个 response.information)
},
response => {
console.log('error...')
}
)我本来打算使用for回圈遍历, 但这样请求数爆炸多......
目前寫在promise回調內
getStudent () {
this.$http.get(api.student_list).then(studentresponse => {
studentresponse.data.forEach(student => {
this.student_ids.push(student.id)
})// 取得student_id的array
this.student_ids.forEach(id => {
this.$http.get(api.student_info + `?studentid=${id}`).then(
inforesponse => {
this.student_infos.push(inforesponse.data[0])
console.log(this.student_infos)
},
inforesponse => {
console.log('error')
}
)// 這id array傳入info端點取的資料
})
}, studentresponse => {
console.log('error')
})
}（慘不忍睹呀）
而且如果之后有一个端点需要更多的参数, 那肯定会完蛋,现在在电脑前面不知道如何是好......
在网上查优化好久都查不到结果, 请问有什么效能佳的方法或是思路吗？
或是針對我的寫法有任何見解的都請大大提出了
- 共 0 条
- 全部回答
-
芃玉燕 普通会员 1楼
在Ajax调用API获取数据时，URL中带有参数时，可以采用以下优化方式：
- 使用query字符串参数：在URL中使用
?符号将参数添加到查询字符串中。例如，如果你的API的URL是https://example.com/api/data?param1=value1¶m2=value2，那么你需要在AJAX请求中设置查询字符串参数，如：
javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data', true); xhr.setRequestHeader('QUERY_STRING', 'param1=value1¶m2=value2'); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // handle the data here } }; xhr.send();- 使用URLSearchParams对象：如果你的API使用了JavaScript内置的URLSearchParams对象，可以使用
URLSearchParams对象来添加和操作参数。例如：
```javascript var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2');
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data', true); xhr.setRequestHeader('QUERY_STRING', params.toString()); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // handle the data here } }; xhr.send(); ```
- 使用AJAX请求对象：如果你的API提供了对应的Ajax请求对象，可以使用该对象的
query属性来获取查询字符串参数。例如：
javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data', true); xhr.setRequestHeader('QUERY_STRING', 'param1=value1¶m2=value2'); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // handle the data here } }; xhr.send();- 使用Promise对象：如果你的API返回的是Promise，可以使用
.then()方法将数据转换为Promise，然后使用.then()方法来处理响应数据。例如：
javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data', true); xhr.setRequestHeader('QUERY_STRING', 'param1=value1¶m2=value2'); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // handle the data here data.then(function(data) { // handle the data here }); } }; xhr.send();以上就是在URL中带有参数时Ajax调用API获取数据的优化方式，可以根据具体情况进行选择和调整。注意，上述示例中都使用了jQuery库来简化了Ajax请求，实际使用时可能需要使用原生的XMLHttpRequest或fetch API等库。
- 使用query字符串参数：在URL中使用
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部