介绍

在前端页面展示的数据大多数都是通过访问一个API获取的，做这件事的方法有好几种，例如 jquery ajax、vue-resource、axios，而vue-resource是vue插件，但3版本不再更新，目前官方 推荐主流的axios，aixos是一个http请求库。

官方文档：http://www.axios-js.com/zh-cn/docs/

使用

使用流程：

1、安装axios：npm install axios

2、在main.js文件中全局注册

3、在组件中使用

如果打开页面就自动渲染，可以放到mounted生命周期钩子 中获取数据并赋值：

异常处理

很多时候我们可能并没有从API 获取想要的数据。这可能是由于很多种因素引起的，比如axios 调用可能由于多种原因而失败，包括但不限于：

  • API 不工作了；

  • 请求发错了；

  • API 没有按我们预期的格式返回信息。

可以使用catch异常处理这些问题。

模拟连接一个未存在的地址，前端给出提示：

全局默认值

在实际开发中，几乎每个组件都会用到axios发起数据请求，如果每次都填写完整的请求路径，不 利于后期维护。这时可以设置全局axios默认值。

自定义实例默认值

有时候服务端接口有多个地址，就会涉及请求的域名不同、配置不同等，这时自定义实例可以很好解决。

拦截器

拦截器可以拦截每一次请求和响应，然后进行相应的处理。

请求拦截应用场景：

  • 发起请求前添加header 响应拦截应用场景：

  • 统一处理API响应状态码200或非200的提示消息

  • 统一处理catch异常提示信息