axios 使用入门

axios 使用入门

1. 阅读目录
   一、前言#
   二、干货合集#
   　　1、加载#
   　　2、get & post#
   　　3、拦截器#
   三、总结#

一、前言

在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，无法抛弃 Jquery 的重要理由，除了优秀的前端 DOM 元素操作性以外，能够非常便捷的发起 http 请求也占有非常重要的地位。

既然我们已经开始使用 Vue 进行前端开发，抛弃了对页面 DOM 元素的操作，难道，为了方便的发起 http 请求，还需要在项目中加载 jquery 或者是手动创建 http 请求吗？

答案当然是不用的，作为目前主流的前端框架，开发者、社区早已经为我们提供好了解决方案。随着 Vue 作者尤雨溪宣布不再维护 vue-resource，转而推荐大家使用 axios，目前在 Vue 社区中 axios 开始占据 http 库的主导地位，所以这一章我们就介绍下如何使用 axios 发起 http 请求。

二、干货合集

axios 是一个基于 Promise 的 http 客户端，可以用于浏览器和 node.js。官方文档对于 axios 库的使用方法已经写的很清楚了，所以这里只介绍如何与 Vue 进行结合，从而使用 axios 发起 http 请求。

这一章会涉及到简单的前后端的数据交互，作为一名 .NETer，本篇文章将采用 ASP.NET Core Web API 作为后端服务，你可以根据自己的喜好进行选择。当然，如果你之前并没有接触过后端，不知道怎么选择的话，推荐你尝试 .NET Core，示例的后端项目我也会同步放在 Github 上。

PS：在后端模板项目上，我会添加对于 Swagger API 文档的支持，以及在后端程序中进行配置跨域请求，从而允许后端接口可以接受跨域请求的访问。这些内容并不会在本篇文章中展现，如果你需要详细了解，你可以查看另一个系列的文章（ASP.NET Core 项目实战）那里会介绍一些关于 ASP.NET Core 项目的开发，两个系列相辅相成，后续所有涉及到前后端的交互开发，全部在此系列（ASP.NET Core 项目实战）中进行呈现。

1、加载#

代码如下（示例）：

// 使用 npm 加载
npm install axios

// 使用 bower 加载
bower install axios

// 使用 yarn 加载
yarn add axios

2.　2、get & post#

相比于 put 请求和 delete 请求，get 请求和 post 请求是我们最常用的两个方法，一个很常见的使用场景，我们通过 get 请求来搜索数据，通过 post 请求来提交数据。

在示例的后端接口中，提供了五个接口方法，分别对应了 get、post、put、delete 这四个 HTTP 谓词。put 和 delete 对应的接口方法这里并没有实现，这篇文章主要使用的是 get 和 post 谓词对应的三个接口。

2.1、获取所有的用户数据（/api/user）

get 请求，加载全部的用户数据，按照创建时间进行降序排列。

2.2、根据搜索条件搜索用户数据(/api/user/query)

get 请求，根据用户输入框输入的数据，从全部的用户数据中查找出符合条件的数据，因为这里会存在多个查询条件，其实并不太符合 Restful 的接口设计，所以这里我采用 ASP.NET Core 中的特性路由的方式，指定此路由为专门的数据查询接口。

2.3、新增用户数据(/api/user)

post 请求，提交一条新的用户数据，因为是采用 Restful 风格的接口设计，所以请求的地址与获取所有的用户数据相同，仅仅是 http 谓词的不同。最终实现的前端页面如下所示，页面第一次加载时会加载全部的用户数据；当用户点击搜索按钮时，会根据顶部的三个输入框中的值，从用户数据中进行筛选；当点击新增按钮时，则会根据 Name 和 Email 输入框中的值新增一条新的用户数据。
　　

首先我们需要在页面加载的时候请求后端接口，去获取我们的用户数据，这里我们在 Vue 实例的 methods 中定义一个 getList 方法，在这个方法中我们去请求后端接口。

在之前学习 Vue 的生命周期钩子函数时我们了解到，在 created 钩子函数中，对于 Vue 实例的 data 和 methods 已经初始化完成，此时，整个 Vue 实例已经初始化完成。但是，初始化完成的 Vue 实例没有与 DOM 进行绑定。所以，如果我们想要在页面初始加载时就渲染出整个用户信息表格，created 函数是能够调用 getList 方法最早的一个钩子函数。

在 axios 中，我们发起一个 http 请求后，在 then 回掉方法中进行请求成功后的数据处理，在 catch 回掉方法中捕获请求失败的信息。这里的 then 方法就相当于我们在 Jquery 中使用 ajax 时的 success 回调方法，而 catch 方法则是 error 回调。

axios.get('http://localhost:5000/api/user')
    .then(function (response) {
   
        console.log(response)
    }).catch(function (error) {
   
        console.log(error)
    })

从接口打印出的返回结果可以看到，接口返回的 response 中包含了五部分的信息。这里 data 属性显示的就是整个的用户数据集合，在实际使用中，你需要与 http 响应状态码进行结合，考虑如果后端出现错误如何使前端知晓，从而相对友好的通知用户。

// 后端接口返回的数据
  data: {
   },

  // 服务端接口返回的 HTTP 状态码
  status: 200,

  // 服务端接口返回的 HTTP 状态信息
  statusText: 'OK',

  // 后端接口返回的响应 header 信息
  headers: {
   },

  // axios 发起的接口请求时的配置信息
  config: {
   },

  // 接口响应的请求信息
  request: {
   }