对象篇
模块化编程-自研模块加载器
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
上面三种
Content-Type
值介绍 -
application/json
和application/x-www-form-urlencoded
都是表单数据发送时的编码类型。 -
form
的enctype
属性为编码方式,常用有两种:application/x-www-form-urlencoded
和multipart/form-data
,默认为application/x-www-form-urlencoded
。 -
当
action
为get
时候,浏览器用x-www-form-urlencoded
的编码方式把form
数据转换成一个字串(name1=value1&name2=value2...)
,然后把这个字串append
到url
后面,用?
分割,加载这个新的url
。 -
当
action
为post
时候,浏览器把form
数据封装到http body
中,然后发送到server
。 -
如果没有
type=file
的控件,用默认的application/x-www-form-urlencoded
就可以了。 -
但是如果有
type=file
的话,就要用到multipart/form-data
了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file)
、Content-Type(默认为text/plain)
、name(控件name)
等信息,并加上分割符(boundary)
。
二、发送 formdata 请求(下面有这几种方式格式化参的数据样本,用于参考比较,看需求选择方式)
- 方式一,自己封装一个格式化函数:
import axios from ‘axios’
################################### 请求方式一,全局使用
// 创建 axios 实例
const service = axios.create({
baseURL: ‘’,
timeout: 20000,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})
// 将请求数据转换成功 formdata 接收格式
service.defaults.transformRequest = (data) => {
return stringify(data)
}
################################### 请求方式二,局部使用
axios({
method: ‘post’,
url: ‘http://localhost:8080/dzm’,
data: {
username: ‘dzm’,
password: ‘dzm123456’
},
transformRequest: [
function (data) {
// 将请求数据转换成功 formdata 接收格式
return stringify(data)
}
],
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})
################################### 转换方法封装
// 将参数转换成功 formdata 接收格式
function stringify (data) {
const formData = new FormData()
for (const key in data) {
// eslint-disable-next-line no-prototype-builtins
if (data.hasOwnProperty(key)) {
if (data[key]) {
if (data[key].constructor === Array) {
if (data[key][0]) {
if (data[key][0].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
data[key].forEach((item, index) => {
formData.append(key + [${index}]
, item)
})
}
} else {
formData.append(key + ‘[]’, ‘’)
}
} else if (data[key].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
formData.append(key, data[key])
}
} else {
if (data[key] === 0) {
formData.append(key, 0)
} else {
formData.append(key, ‘’)
}
}
}
}
return formData
}
- 方式二,使用
qs
组件,但是qs
格式化会过滤空数组数据:
import axios from ‘axios’
// qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用
import qs from ‘qs’
################################### 请求方式一,全局使用
// 创建 axios 实例
const service = axios.create({
baseURL: ‘’,
timeout: 20000,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})
// 将请求数据转换成功 formdata 接收格式,这一段选方式一那种拦截转换也可以。
service.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
// 让每个请求携带自定义 token 请根据实际情况自行修改
config.headers[‘X-Token’] = token
}
// 将请求数据转换成功 formdata 接收格式
config.data = qs.stringify(config.data)
return config
}, err)
################################### 请求方式二,局部使用
axios({
method: ‘post’,
url: ‘http://localhost:8080/dzm’,
data: {
username: ‘dzm’,
password: ‘dzm123456’
},
transformRequest: [
function (data) {
// 将请求数据转换成功 formdata 接收格式
return qs.stringify(data)
}
],
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})
- 方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)
import axios from ‘axios’
################################### 请求方式跟上面一样
总结
秋招即将开始,校招的朋友普遍是缺少项目经历的,所以底层逻辑,基础知识要掌握好!
而一般的社招,更是神仙打架。特别强调,项目经历不可忽视;几乎简历上提到的项目都会被刨根问底,所以项目应用的技术要熟练,底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML,CSS,JavaScript,HTTP,TCP协议,浏览器,Vue框架,算法等高频考点238道(含答案)!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 :
高级前端工程师必备资料包