遇到问题2，异步问题，以及前端请求因为接口问题，报错400时，

最新推荐文章于 2024-11-27 20:39:56 发布

原创最新推荐文章于 2024-11-27 20:39:56 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了如何在前端使用异步Promise处理GET请求，包括new Promise的正确用法、resolve和reject的处理，以及async/await在处理异步操作中的应用。此外，讲解了在项目中使用qs库处理数组数据的问题及其解决方法。

异步Promise
fun(a){
return new Promise(（resolve，reject） =>{
let params = {
a:a
}
this.$request.getRules.getRules(params).then(res =>{
// console.log(res.data)
resolve(res.data.data)
})
})
}，
使用new promise时，不仅要写resolve，成功时返回的结果，还要写失败时，reject返回的值
还有就是new promise里面的值，在外部，是没有办法直接访问的，要通过resolve暴露出来
.then是promise的一个方法,就是比如 let all = this.fun(a).then()，其有两个参数，第一个参数表示，执行resolve后返回的值，在后面接catch，就是在第一个参数结果报错时，捕获错误信息。
.then的第二个参数，可以直接捕获promise中的reject，执行reject函数

async和await异步编程
async change(item){
let ruleList = await this.fun(item.a)
item.ruleList = ruleList
},
async 告诉我们这个函数有异步操作，并且在执行到await时，停下等待，直到获取了ruleList的值之后，再运行
如果没有写这个的话，会访问不到数据
在有异步函数以及异步函数在后面需要被使用时，才会使用async await

前端请求-------qs
在项目中发送请求时，有时会遇到400 bad request，这样是因为接口有问题，对比其后台数据以及格式发现，是因为路径中有数组
qs是查询字符串解析和将对象序列化的库，在请求的时候，当我们的传输的data中有数组的时候，需要将其序列化之后，才能与后台进行通讯
在vue项目中使用qs库：
安装：npm install qs
引入：import qs from ‘qs’
方法：qs.parse()
qs.parse是将url解析成对象
方法：qs:stringify()
qs.stringify()将对象解析成url，
如果想解析为指定的输出格式，需要加上第二个参数{arrayFormat：‘indices’}
具体可以参考另一个博主写的：https://blog.csdn.net/weixin_44457418/article/details/109050430?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_ecpm_v1~rank_v31_ecpm-2-109050430.pc_agg_new_rank&utm_term=%E5%89%8D%E7%AB%AF%E5%BC%95%E5%85%A5qs&spm=1000.2123.3001.4430