文末
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
实现ajax的方式有多种,如jQuery封装的ajax,原生的XMLHttpRequest,以及axios。但各种方式都有利弊:
-
原生的XMLHttpRequest的配置和调用方式都很繁琐,实现异步请求十分麻烦
-
jQuery的ajax相对于原生的ajax是非常好用的,但是没有必要因为要用ajax异步网络请求而引用jQuery框架
Axios(ajax i/o system):
这不是一种新技术,本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,只不过它是基于Promise的,符合最新的ES规范。具备以下特点:
-
在浏览器中创建XMLHttpRequest请求
-
在node.js中发送http请求
-
支持Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消要求
-
自动转换JSON数据
-
客户端支持防止CSRF/XSRF(跨域请求伪造)
=====================================================================
安装有三种方式:
npm安装
npm install axios
bower安装
bower install axios
通过cdn引入
在vue项目的main.js
文件中引入axios
import axios from ‘axios’
Vue.prototype.$axios = axios
在组件中使用axios
==========================================================================
-
get:获取数据,请求指定的信息,返回实体对象
-
post:向指定资源提交数据(例如表单提交或文件上传)
-
put:更新数据,从客户端向服务器传送的数据取代指定的文档的内容
-
patch:更新数据,是对put方法的补充,用来对已知资源进行局部更新
-
delete:请求服务器删除指定的数据
示例代码
方法一
//请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get(‘/goods.json’,{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
方法二
this.$axios({
method: ‘get’,
url: ‘/goods.json’,
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
post请求一般分为两种类型
1.form-data
表单提交,图片上传、文件上传时用该类型比较多
2. application/json
一般是用于 ajax 异步请求
示例代码
方法一
this.$axios.post(‘/url’,{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
方法二
$axios({
method: ‘post’,
url: ‘/url’,
data: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
form-data请求
let data = {
//请求参数
}
let formdata = new FormData();
for(let key in data){
formdata.append(key,data[key]);
}
this.$axios.post(‘/goods.json’,formdata).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
示例代码
put请求
this.$axios.put(‘/url’,{
id:1
}).then(res=>{
console.log(res.data);
})
patch请求
this.$axios.patch(‘/url’,{
id:1
}).then(res=>{
console.log(res.data);
})
示例代码
参数以明文形式提交
this.$axios.delete(‘/url’,{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
})
参数以封装对象的形式提交
this.$axios.delete(‘/url’,{
data: {
id:1
}
}).then(res=>{
console.log(res.data);
})
//方法二
axios({
method: ‘delete’,
url: ‘/url’,
params: { id:1 }, //以明文方式提交参数
data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
console.log(res.data);
})
并发请求:同时进行多个请求,并统一处理返回值
示例代码
this.$axios.all([
this.$axios.get(‘/goods.json’),
this.$axios.get(‘/classify.json’)
]).then(
this.$axios.spread((goodsRes,classifyRes)=>{
console.log(goodsRes.data);
console.log(classifyRes.data);
})
)
========================================================================
示例代码
let instance = this.$axios.create({
baseURL: ‘http://localhost:9090’,
timeout: 2000
})
instance.get(‘/goods.json’).then(res=>{
console.log(res.data);
})
可以同时创建多个axios实例。
axios实例常用配置:
-
baseURL 请求的域名,基本地址,类型:String
-
timeout 请求超时时长,单位ms,类型:Number
-
url 请求路径,类型:String
-
method 请求方法,类型:String
-
headers 设置请求头,类型:Object
-
params 请求参数,将参数拼接在URL上,类型:Object
-
data 请求参数,将参数放到请求体中,类型:Object
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记