末了
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技能需求有一个基本的相识。有一个已就业为目的的学习目的，然后为之努力，贯彻始终。如果你有幸看到这篇文章，盼望对你有所帮助，祝你转行成功。
开源分享：【大厂前端面试题剖析+核心总结学习条记+真实项目实战+最新讲解视频】
}
// 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()
末了
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技能需求有一个基本的相识。有一个已就业为目的的学习目的，然后为之努力，贯彻始终。如果你有幸看到这篇文章，盼望对你有所帮助，祝你转行成功。
开源分享：【大厂前端面试题剖析+核心总结学习条记+真实项目实战+最新讲解视频】
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
