-
实战。项目环境配置
vant 组件库 引入
查看全部 -
//取消请求：取消正在进行的HTTP请求
let source = axios.CancelToken.soure() axios.get('/data.json'{ cancelToken:source.token }).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) }) //取消请求(msg可选) source.cancel('cancel http') //什么情况可能用 商城 大批量数据查询 3-5秒查看全部 -
axios错误处理 ：请求错误时进行的处理
axios.interceptors.request.use(config=>{ return config },err=>{ return Promise.reject(err) }) axios.interceptors.response.use(res=>{ return res },err=>{ return Promise.reject(err) }) //无论是请求错误还是响应错误都会进到catch里 axios.get('/data.json').then(res=>{ }).catch(err=>{ console.log(err) }) //例子，实际开发中 一般添加统一的错误处理 let instance = axios.create({}) instance.interceptors.request.use(config=>{ return config },err=>{ //请求错误 一般http状态码开头，常见 401超时 404 not fonud $('#modal').show() setTimeout(()=>{ $('#modal').hide() },2000) return Promise.reject(err) }) instance.interceptors.response.use(res=>{ return res },err=>{ //响应错误处理 一般http开头的状态码以5开头， 500系统错误 502系统重启 $('#modal').show() setTimeout(()=>{ $('#modal').hide() },2000) return Promise.reject(err) }) //如果是不需要做特殊的错误处理就不需要写.catch instance.get('/data.json').then(res=>{ console.log(res) // }).catch(err=>{})查看全部 -
拦截器 实例 登录状态 token: ''
//开发的时候一般是给实例添加拦截器，给全局添加会造成全局污染 //需要登录的接口 let instance = axiios.create({}) instance.interceptors.request.use(config=>{ config.headers.token = '' return config }) //不需要登录的接口，另外创建一个实例 let newInstance = axios.create({})//移动端开发
let instance_phone = axiios.create({}) //请求等待样式 instance_phone.interceptors.request.use(config=>{ $('#modal').show() return config }) //返回响应样式 instance_phone.interceptors.response.use(res=>{ $('#modal').show().hide() return res })查看全部 -
拦截器 在请求或响应被处理前拦截它们
请求拦截器
axios.interceptors.request.use(config=>{ //在发送请求前做些什么 return config },err=>{ //在请求错误的时候做些什么 return Promis.reject(err) })响应拦截器
axios.interceptors.response.use(res=>{ //请求成功对响应数据做处理 return res },err=>{ //响应错误做些什么 return Promise.reject(err) })//取消拦截器 ，不常用 不重要
查看全部 -
//axios的相关配置
//基本的配置参数 常用
axios.create({
baseURL:' ' ， //请求的域名，基本地址
timeout:1000, //请求的超市时长，前后端协作
url: '/data.json', //请求路径
method: 'get,post , put, patch, delete', //请求方法
headers:{
token: ' '
}, //请求头
params:{ }, //请求参数 会拼接在url上
data: { }， //请求参数 放在请求体
})
1、axios 全局配置
axios.defaults.timeout =1000
axios.defaults.baseURL = 'http://loca'host:8080'
2、axios 实例配置
let instance = axios.create() instance.defaults.timeout = 3000
3、axios请求配置
instance.get('/data.json'{ timeout:5000 })查看全部 -
//axios实例
//后端接口地址有多个，并且超时时长不一样
创建实例
let instance = axios.create({
baseURL : 'http://localhost:8080',
timeout: 1000
})
怎么用
instance.get('/data.json').then(
res=>{
console.log(res)
}
)
两种接口要求不一样 处理超时等
查看全部 -
并发请求：同时处理多个请求并统一处理返回值
//axios.all() 参数数据
//axios.spread() 分割不同请求的返回值
axios.all(
[
axios.get('/data.json'),
axios.get('/city.json')
]
).then(
axios.spread((dataRes,cityRes)=>{
console.log(dataRes,cityRes)
})
)
查看全部 -
axios.delete('/delete',config).then()
config
axios.delete('delete',{
params:{
id: 12
}
}).then(res=>{console.log(res)})
//加地址后边 delete?id=12
axios.delete('/delete',{
data:{
id: 12
}
}).then(res=>{console.log(res)})
//不加地址后边
不用别名些话
axios({
method:'delete',
url: '/delete'
params:{}
}).then(res=>{console.log(res)})
查看全部 -
post 两种提交 form-data 和 applicition/json
form-data提交，先建立个FormData对象
查看全部 -
get 两种写法：
axios.get('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
axios({
methord: 'get',
url: '/data.json',
params:{
id:12
}
}).then(res=>{
console.log(res)
})
查看全部 -
axios请求
get 获取数据，post 提交数据（表单+工作文件上传）put 更新数据（所有数据推送到后端）
patch 更新数据 （只将修改的数据推送到后端）
delete 删除数据
具体用那种方法 是由后端定义
查看全部 -
//并发请求 axios.all([ axios.get('/data.json'), axios.get('/data1.json') ]).then( axios.spread((data,data1)=>{ console.log(data,data1) }) )查看全部 -
axios请求方法：get、post、put、patch、delete
get:获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
请求携带参数：
//最终请求的路径为：HTTP://localhost:8080/data.json?id=12 axios.get('./data.json',{ params:{ id:12 } }).then(res=>{ console.log(res) }) axios({ url:'./data.json', params:{ id:12 } }).then(res=>{ console.log(res) })查看全部 -
axios 请求方法：get post put patch delete
get:获取数据post:提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch:更新数据（只将修改的数据推送）
detele:删除数据
查看全部
举报