Axios请求库学习(一):基础使用

什么是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
}