Vue
-
什么是MVVM?
-
mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
-
组件之间的传值?
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用?
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用?
-
Vue 的 nextTick 的原理是什么?
-
Vuex 有哪几种属性?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
btn.onclick=function(){
fetch(url+"/stats/getUserList",{
method:"POST",
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
body:Qs.stringify(data)
}).then(res=>{
console.log(res)
return res.json();
}).then(data=>{
console.log("返回值:",data)
}).catch(err=>{
console.log(err)
})
}
注意:
fetch
返回的是promise
对象。所以fetch().then()
第一个then
里返回的并不是真正的数据。而是一个promise
,所以我们需要通过链式操作第二个then()
来获取真正的数据。fetch
发送参数是通过body
字段来实现的。body
是fetch
第二个参数的必选参数之一。params
的参数如下
method
(String): HTTP请求方法,默认为GET
;body
(String): HTTP的请求参数;headers
(Object): HTTP的请求头,默认为{};credentials
(String): 默认为omit
,忽略的意思,也就是不带cookie
;还有两个参数,same-origin
,意思就是同源请求带cookie
;include
,表示无论跨域还是同源请求都会带cookie
。
body
带的参数是一个序列化以后的字符串。类似name="coc"&age=30
.所以这里我们通过qs
库进行序列化。注意通过cdn
引入qs
后qs
函数应该是Qs
,Qs.stringify(data)
。
4.3 在vue中的应用
fetch
支持在vue
中使用。这样通过ajax
请求就无需通过安装axios
依赖库来实现。
具体使用:
4.3.1 组件中发送请求
<div style="margin-top:20px">
<button @click="getLevelData" >获取用户信息</button>
</div>
export default{
name:"users",
data(){
return{
arr:[]
}
},
methods:{
getLevelData(){
async function getInfo(){
return await fetch(api+"/stats/getUserList",{
method:"post",
headers:{
'Content-Type':"application/x-www-form-urlencoded"
},
body:qs.stringify(data)
}).then(res=>res.json())
}
getInfo().then(res=>{
this.arr=res.data.data
})
.catch(err=>{
console.log("get--error:",err)
})
}
}
4.3.2 表单通过 fetch 发送 ajax 请求
<p>手机号:<input type="text" v-model="mobile"></p>
<p>密码:<input type="password" v-model="password"></p>
<input type="button" value="登录" @click="go">
<script>
export default {
name:"Login2",
data(){
return{
mobile:"",
password:"",
}
},
methods:{
go(){
var data={
mobile:this.mobile,
password:this.password
}
getLevelData(){
async function getInfo(){
return await fetch(api+"/stats/getUserList",{
method:"post",
headers:{
'Content-Type':"application/x-www-form-urlencoded"
},
body:qs.stringify(data)
}).then(res=>res.json())
}
getInfo().then(res=>{
this.arr=res.data.data
}).catch(err=>{
console.log("get--error:",err)
})
}
}
}
}
</script>
注意⚠️:如果是提交表单元素,那么一定要添加headers
参数, 而且content-Type
的值必须是application/x-www-form-urlencoded
。
heders:{
'Content-Type':"application/x-www-form-urlencoded"
},
4.3.3 通过 vuex 请求数据
export default {
name:"Login2",
data(){
return{
mobile:"",
password:"",
val:""
}
},
methods:{
go(){
var data={
mobile:this.mobile,
password:this.password
}
this.$store.dispatch("login",data).then(res=>{
this.arr=res.data.data
}).catch(err=>{
console.log("登录;err",err)
})
}
}
}
store.js
中对应的action
:
login({commit},payload){
return new Promise((resolve,reject)=>{
fetch("/account/login",payload).then(res=>{
resolve(res)
}).catch(err=>{
console.log("登录--err:",err)
reject(err)
})
})
},
通过vuex
实现请求,fetch
发送请求可以不用带method
,body
和headers
等参数。
Vue
-
什么是MVVM?
-
mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
-
组件之间的传值?
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用?
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用?
-
Vue 的 nextTick 的原理是什么?
-
Vuex 有哪几种属性?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】