1.vue-resource对比axios
1.0 axios params 配置参数在url 显示,form-data 用于 图片上传、文件上传
1.1 axios 全局配置
axios.defaults.baseURL=‘http:localhost:8080’
1.2 axios 实例配置
let instance=axios.create()
instance.defaults.timeout=3000
或者
let instance=axios.create({
timeout:3000
})
instance.get('data/json',{
params:{id:1}
}).then(
(res)=>{
console.log(res)
})
1.3 axios 请求配置
instance.get('/data.json',{
timeout:3000
})
1.4 拦截器
1.4.1 请求拦截器
axios.interceptors.request.use(
config=>{ return config },
err=>{ return Promise.reject(err) }
)
1.4.2 响应拦截器
axios.interceptors.response.use(
res=>{ return res },
err=>{ return Promise.reject(err) }
)
1.4.3 取消拦截器
axios.interceptors.response.eject(interceptors)
1.4.4 实际例子 :登录权限
let instance=axios.create({})
instance.interceptors.request.use(
config=>{
//$('load').show()
config.headers.token='';
return config
}
)
1.5 取消请求
let source=axios.CancleTaken.source();
axios.get('/list',{
CancleTaken:source.token
}).then().catch()
取消(场景:查询结果时间过长)
source.cancle('mes')
扩展:
扩展 1. post delete put get 常用写法
// 增删改查 postdeleteput(patch:part change)get // 1.get // axios.get('/data.json').then(res=>{ // console.log(res); // }) // axios.get('/data.json',{ // params:{ // id:100 // } // }).then(res=>{ // console.log(res); // }) // axios({ // url:'/data.json', // method:'get', // params:{ // id:200 // } // }).then(res=>{ // console.log(res); // }) // 2.post // form-data 表单提交:图片、文件上传 // application/json // axios.post('/data',{ // arr:[1,2] // }).then(res=>{ // console.log(res); // }) // axios({//get error way - query string parameters // url:'/data', // method:'post', // params:{ // arr:[3,4] // } // }).then(res=>{ // console.log(res); // }) // axios({ // request payload content-type: application/json // url:'/data', // method:'post', // data:{ // arr:[3,4] // } // }).then(res=>{ // console.log(res); // }) let data = { id:300 }; let myform = new FormData(); for(let key in data){ myform.append(key,data[key]) } // axios({ // content-type: multipart/form-data // url:'/data', // method:'post', // data:myform // }).then(res=>{ // console.log(res); // }) axios.post('/data',myform).then(res=>{ console.log(res); })
扩展 2. 并发请求
axios.all([ axios.get('/data.json'), axios.get('/data.json') ]).then( axios.spread((res1,res2)=>{ console.log(res1,res2); }) )
2. import ... from和import {} from 的区别
3.element-ui