最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
并引入axios : import axios from ‘axios’
二、axios方法的基本使用
==================
1. axios常用请求方法
(5种)get,post,put,patch,delete
get:获取数据(编辑)
post: 提交数据(表单提交+文件上传)
put: 更新数据 ( 所有数据推送到后端 )
patch: 更新数据(只将修改的数据推送到后端)
delete: 删除数据
post put patch很相似,都有两种数据格式:form-data,application
1)get
created() {
/* get方法的两种写法 */
axios.get(‘/data.json’,{ // http://localhost:8080/data.json?id=12
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
axios({
method:‘get’,
url:‘/data.json’, /* 相对于index.html */
params:{
id:12
}
}).then(res => {
console.log(res)
})
}
2)post
post三个参数:url路径,请求数据,config
请求数据的两种方法:
form-data 表单提交(图片文件上传)
application/json
let data = {
id:12
}
// application/json 两种写法
axios.post(‘/post’,data).then(res =>{
console.log(res)
})
axios({
method: ‘post’,
url:‘/post’,
data: data
}).then(res =>{
console.log(res)
})
// form-data
let formData = new FormData()// 首先创建一个formData格式的数据
for(let key in data){
formData.append(key, data[key]) // 添加
}
axios.post(‘post’,formData).then(res =>{
console.log(res)
})
3)put和patch
// put请求
axios.put(‘/put’,data).then(res=>{
console.log(res)
})
// patch
axios.put(‘/patch’,data).then(res=>{
console.log(res)
})
4)delete
axios.delete(‘/delete’, { // 只有两个参数url,config
params:{ // 在url上显示
id: 12
}
}).then(res=>{
console.log(res)
})
axios.delete(‘/delete’, { // 只有两个参数url,config
data:{ // 不在url上传输
id: 12
}
}).then(res=>{
console.log(res)
})
axios({
methos:‘delete’,
url:‘/delete’,
params:{},
data:{}
}).then(res=>{
console.log(res)
})
2. axios并发请求
使用场景:需要请求多个接口,同时处理返回值
axios.all() 参数是数组,里面是一个个ajax请求
axios.spread() 作用是在axios.all()多个请求完成之后,分割请求返回值,把返回数据进行处理
axios.all(
[
axios.get(‘/data.json’),
axios.get(‘/city.json’)
]
).then( // 回调函数不同
axios.spread((dataRes,cityRes)=>{
console.log(dataRes,cityRes)
})
)
三、axios方法深入
===============
1. 创建axios实例
类似于数组创建的let arr = new Array()
后端接口地址有多个,并且超时试长不一样,用实例请求会很方便
let instance = axios.create({ // axios实例
baseURL: ‘http://localhost:8080’,
timeout: 1000
})
let axios2 = axios.create({ // axios实例
baseURL: ‘http://localhost:9090’,
timeout: 5000
})
instance.get(‘/data.json’).then(res=>{
console.log(res)
})
axios2.get(‘/data.json’).then(res=>{
console.log(res)
})
2. 实例相关配置
let instance = axios.create({ // axios实例
baseURL: ‘http://localhost:8080’,
// 请求的域名/基本地址。会默认把baseurl拼接在相对路径前面
timeout: 1000,
// 设置请求超时试长,单位:ms。超时会阻塞后端内容,因此设计超时时长会控制资源释放
url: ‘data.json’, // 请求的路径。
method: ‘get’, // post get patch put delete
headers:{
token:‘’ // token识别登录人员信息,需要传递给后端
}, // 设置请求头
params: {}, // 会将请求参数拼接在url上
data: {}, // 把请求参数放在请求体
})
优先级:全局配置 < 实例配置 < 请求配置
// 1.axios全局配置
axios.defaults.timeout = 1000
axios.defulat.baseURL = ‘http://localhost:8080’
// 2.axios实例配置
let axios2 = axios.create()
axios2.defaults.timeout = 3000
// 3.axios请求配置
axios2.get(‘/data.json’,{
timeout: 9000
}).then(res=>{
console.log(res)
})
3. 具体使用方法
有两种请求接口:http://localhost:9090 和 http://localhost:9091
let real = axios.create({
baseURL: ‘http://localhost:9090’,
timeout: 1000,
})
let real1 = axios.create({
baseURL: ‘http://localhost:9091’,
timeout: 3000,
})
// 实例1请求使用到了:baseURL timeout url method(get) params
real.get(‘/contactList’,{
params:{}
}).then(res=>{
console.log(res)
})
// 实例2请求使用到了:baseURL timeout(修改5000) url method(get) params
real1.get(‘/orderList’,{
最后
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。