vue3 setup 先获取axios数据在进行页面渲染

转载

feiry 2025-01-14 18:47:16

文章标签 vue数据调取怎么渲染列表 ios 搜索数组 文章分类 iOS 移动开发

1，在项目中我们会遇到点击搜索 input框搜索我们需要的信息这个例子是我们照着视频做的

2，在input框中我们需要v-model=“message”数据绑定后在data中定义一个相对性的

data(){
Return {
Message:””,初始值为空
}
}，
Watch：｛
Message(newval)｛
console.log(newval)在watch中就可以时时检测到Message发生变法的值
｝
｝

4，在浏览器中我们可以看到在input中输入值我们就可以打印出来

5，之后我们就可以在watch中发起请求

6，如果请求成功后我们就把成功的数组等于我们之前在data中定义后要循坏的数组 movieList：[ ]

7，赋值成功我们就可以用v-for在页面中渲染啦

8，在页面渲染成功后我们就可以浏览器中效果啦，在input 输入关键字就可以搜索出我们想要的数据来

9，其实到这里的话我们想要的效果有啦，还差一点什么呢我们请求是在watch中请求的只要我们在input框输入关键字，就会不停的出发wacth中请求，不停的请求数据，那我们应该怎么做呢(打开百度搜索axios的终止多次请求)

10，照着人家的文档写，先将方法拷贝过来

cancelRequest(){
if(typeof this.source ==='function'){
this.source('终止请求')
} },

只要触发this.source方法就会停止请求终止上一次的请求

11，之后在请求的第二个参数在拷贝一个参数

cancelToken: new axios.CancelToken(function executor(c) { that.source = c; })

12，拷贝之后我们把new换成一下 this.

this.tledownaxios.CancelToken(function executor(c) { that.source = c; }).catch((err) => { if (axios.isCancel(err)) { console.log('Rquest canceled', err.message);
//请求如果被取消  这里是返回取消的message
} else { //handle error console.log(err);
} })放到请求一开始的位置

13，将(err)=》｛｝改成箭头函数就行啦

最后我们调用这个方法就行啦

This.cancelRequest()

14，好啦我们可以去浏览器中看看效果啦一一一不行？

我们在input款输入多个字他没有终止请求

15，看报错信息that is defind

看代码发现可能this的只想问题

在请求最上面或者改成箭头函数都可以

Var that=this

16,还是不能终止请求

17,最后对照文档我们之前不是把new改成啦this吗

看来一定要加这个new好吧我么加上吧