2024年最新axios在vue中的使用(1)，2024年最新字节跳动前端面试题校招

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

// 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’,{

timeout: 5000

}).then(res=>{

console.log(res)

})

4. axios拦截器

---

拦截器：在请求或者相应被处理前拦截它们

两种：请求拦截器，相应拦截器，取消拦截器（了解）

拦截器两个参数：请求前的拦截函数，请求错误的拦截函数

请求错误：请求没有到达后端（404接口未找到 401请求超时）

响应错误：查询数据，数据库查无此人

区别：请求是否到达后端

axios.interceptors.request.use(config=>{

// 在发送请求前做些什么

return config

}, err=>{

// 在发送请求错误时做些什么

return Promise.reject(err)

})

// 响应拦截器

axios.interceptors.response.use(res=>{

// 请求成功对相应数据处理

return res

},err=>{

// 相应错误做些什么

return Promise.reject(err)

})

// 取消拦截器（了解）

let inter = axios.interceptors.request.use(config=>{

config.headers={

auth: true

}

return config

})

axios.interceptors.request.eject(inter)

5. axios错误处理

---

都会到catch函数

// 例子：实际开发过程中，一般需要添加统一的错误处理

let instance = axios.create({})

instance.interceptors.request(config=>{

return config

},err=>{

// 请求错误 一般http状态码4，常见：401超时 404 not found

$(‘#model’).show()

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】