前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
一、resource请求
npm install vue-resource --save
import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get("")
二、axios 请求
npm install axios --save
axios.defaults.baseURL = "根地址"
//vue页面引入import axios from 'axios'
axios.get(请求的地址)
三、axios 请求(原型方式)
cnpm install axios --save
Vue.prototype.http = axios //配置Vue原型
this.http.get("")
四、fetch请求
fetch
是es6
新一代XMLHttpRequest
的请求方式。无需安装其他库。可以在浏览器中直接应用其提供的api
轻松与后台进行数据交互。
基本用法:
fetch(url,{parmas})
.then(res=>
return res.json() //返回promise对象
)
.then(data=>{
return data //返回真正数据
})
.catch(err=>{
throw new Error(err)
})
4.1 get 方式
<script type="text/javascript">
window.onload=function(){
var url="http://www.baidu.com" //填写自己的域名地址
var btn=document.getElementById("btn");
var data={
verified:1,
warningLevel:0,
sessionID:"3ecf8905a98cb752b127302bf08f08e5"
}
btn.onclick=function(){
fetch(url+"/stats/getUserList?sessionID=3ecf8905a98cb752b127302bf08f08e5&verified=1&warningLevel=0").then(res=> {
return res.json(); //返回promise对象
}).then(data=>{
console.log("返回值:",data)
}).catch(err=>{
console.log(err)
})
}
4.2 POST方式
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=>{
### 更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/cde4ef579c20e890ff41b683955e4c0d.webp?x-oss-process=image/format,png)
350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中...(img-imSwWBbo-1715385253170)]