什么是axios?
Axios是一个易用、简洁且高效的http库。
Axios基于promise实现,可以用在浏览器和node.js中。因其使用简便、功能强大的特点,已成为前端网络请求领域的霸主,广泛应用于诸多的Web项目里。
接下来,我们就来从基础部分开始对Axios请求库的学习。
安装
npm安装
npm install axios
bower安装
bower install axios
cdn链接
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用
API方式
可以通过下向axios传递相关配置来创建请求
- axios(config)
axios({
method: 'get',
url: 'xxx',
data: {}
});
- axios(url,config) config可不传
axios('http://xxx');
axios('http://xxx',{
xxx
});
别名方式
axios中为了使用方便,为其所支持的请求方法都提供了别名。
需要注意的是:在使用别名方法时,除request方式外,其余方法中 url
、method
、data
这些属性都不必在配置中指定。
- axios.request(config)
- axios.get(url,config)
- axios.delete(url,config)
- axios.head(url,config)
- axios.options(url,config)
- axios.post(url,config)
- axios.put(url,config)
- axios.patch(url,config)
创建实例
通过自定义配置创建一个axios实例,可以创建实例是传入属性值对默认属性值进行覆盖修改。
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
})
以下是axios实例中的方法:
- axios#request(config)
- axios#get(url,config)
- axios#delete(url,config)
- axios#head(url,config)
- axios#options(url,config)
- axios#post(url,config)
- axios#put(url,config)
- axios#patch(url,config)
拦截器
在日常的项目(我只要用Vue框架,所以这里暂指Vue项目)使用中,通常不会直接使用axios进行请求的发起,而是会对axios进行一次封装。
根据项目的要求去对请求的相关属性进行封装和修改,可以极大地节省请求的重复代码,提高工作效率。而在封装的过程中,重点就是创建实例的方式和拦截器的使用了。
什么是拦截器?
axios中的拦截器指的是经过create方法创建的实例所拥有的拦截器属性集合,其中包含两种拦截器:请求拦截器和响应拦截器,分别可以在请求或响应被then或catch处理之前拦截它们,进行自己的处理操作。
使用拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
拦截器操作
一般来说,在请求拦截器中可以对请求头进行处理,如token、content-type等属性。
比如:有的请求不需要token验证而有的页面需要token验证,就可以在请求拦截器里根据条件对token进行动态添加。
而在响应拦截器里,多是对响应数据中的状态码进行处理,依据不同状态码做出不同的状态提示。这段操作封装到这里,也就不需要在页面中重复多次的书写状态码判断的操作代码了。
const res = response.data
if (res.code !== 20000) {
xxx
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}