用惯了,jquery,不过最近因为需要使用vue搭建项目,其中横在自己面前的一个难题就是axios,现在集中突击一下。
1.什么是Axios?
这个其实把它当做jquery 来用,也是一个封装好的js的访问http服务的库。所以他是一个库,根据现在面向对象的尿性,是个库都可以实例化,不错,axios也可以。
安装引入什么的,就不再多说了。
2.过程式的使用:
import axios from 'axios';
export const test = params=>{ //箭头函数的形式。
return axios.post('/index/login',{username:'user'}).then(function(resopnse){ //注意参数一般都是json的形式。
console.log(resoponse);//在post成功以后调用这里,这个的优点是,使异步调用数据达到同步的效果,不会一个异步还没有结束就执行后面的方法。
}).catch(function(error){
console.log(error)
});
}
这里必须着重说一下什么是箭头函数了,其实我对js不太了解,对es6,同样是一知半解。所以只能搜一搜了。
箭头函数的用法:=>是匿名函数的一种简写,但是也会有却别。
=>这个箭头的前面是参数,后面必须要有return ,当然单行的表达式,可以省略()和 return
下面写一个实例:
()=>23; 这个是没有参数的,箭头函数写法,可以类比三目运算,他的完整的形式应该是这样的、
()=>{
return 23;
}
{}花括号是函数体,当行的时候可以省略。
一个参数时:params=>23
两个参数:(a,b)=>a+b 完整的形式:
(a,b)=>{
return a+b;
}
当然这里有个大坑:箭头函数和匿名函数的区别,可以看看在箭头函数中和匿名函数中的区别。具体的不在这里展开。
下面来一个axios.get的写法
import axios from 'axios';
export const getList=params=>{
return axios.get('/index'.{params:{username:'abc'}}).then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
});
}
3.对象封装的axios的使用。
接下来是泛滥的面向对象
var request = axios.create({
baseURL:'balabalbalbal',
method:'get'
});
当然这里面的配置有很多,只是做一个实例。
实例化以后修改默认值的方法:
axios.defaults.xxx='值'
xxx,表示的是在实例化的时候传入的值。
4.拦截器
拦截器是这里面的最骚的东西,他就想一个加塞专业户,不管你在请求时,还是得到相应时,就像安检门。进出一个屋子,都要经过突然。
他有什么效果:就是拦截你的then,catch. 如果有一天你发想你发送的请求后台接口没有问题,但总是得不到结果,你就得看看了,是不是有人做了拦截器,对返回的数据的结构和字段进行了限制了。我就是今天被困了一天。最后被人指出时,感觉自己像个智障。
好了,如何开始使用一个拦截器:
axios.interceptors.request.use(function(config){...},function(error){})//关于请求的axios
axios.interceoptors.response.use(function(){},function(){}); //axios的响应拦截
我们发现其实use里面可以传入两个函数,其实这里面对应的是then,和catch的处理。
这两个传入的函数可以配合箭头函数。