Axios

Axios是一个基于Promise的HTTP库

它是一个简洁、易用且高效的代码封装库。通俗地讲，它是当前比较流行的一种Ajax框架，可以使用它发起HTTP请求接口功能，它是基于Promise的，相比较Ajax的回调函数能够更好地管理异步操作。
Axios的特点：
（1）从浏览器中创建XMLHttpRequests。
（2）从Node.js创建HTTP请求。
（3）支持Promise API。
（4）拦截请求和响应。
（5）转换请求数据和响应数据。
（6）取消请求。
（7）自动转换JSON数据。
（8）客户端支持防御XSRF。

基本使用

首先使用NPM安装Axios的依赖，命令如下：
npm install axios
如果要全局使用Axios就需要在main.js中设置，然后在组件中通过this调用，代码如下：
import axios from ‘axios’
Vue.prototype. $ axios = axios;　　//加载到原型上
Axios提供了很多请求方式，例如在组件中直接发起GET或POST请求：

分别写两个请求函数，利用Axios的all方法接收一个由每个请求函数组成的数组，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法中接收一个回调函数，该函数的参数就是每个请求返回的结果，代码如下：

以上通过Axios直接发起对应的请求其实是Axios为了方便起见给不同的请求提供别名方法。我们完全可以通过调用Axios的API，传递一个配置对象来发起请求。
发送POST请求，参数写在data属性中，代码如下：

发送GET请求，

默认就是GET请求，直接在第一个参数处写路径，在第二个参数处写配置对象，参数通过params属性设置，代码如下：

Axios为所有请求方式都提供了别名：

axios.request(config)
axios.get(url,[config])
axios.delete(url,[config])
axios.head(url,[config])
axios.options(url,[config])
axios.post(url,[data],[config])

axios.put(url,[data],[config])
axios.patch(url,[data],[config])
注意：在使用别名方法时，url、method、data这些属性都不必在配置中指定。

json-server的安装及使用
json-server是一个Node模块，运行Express服务器，我们可以指定一个JSON文件作为API的数据源。简单理解为在本地创建数据接口，使用Axios访问数据，使用步骤如下。
（1）首先输入命令cmd进入终端，在根目录下全局安装json-server，命令如下：

npm install -g json-server

（2）在任意盘符中创建一个文件夹用于存放JSON数据文件，终端切换到该文件目录下，执行初始化命令（一直按回车键即可）：

npm init

（3）在初始化的项目中安装json-server，执行如下命令：

npm install json-server --save

（4）此时我们在项目文件夹下就可看到一个package.json文件，然后在当前目录下新建一个db.json文件，在本文件下编写自己的JSON数据：

"uscrs":[
nane" :"beixi".
phone :"1553681223+"cma1l":"6354987200g4,oon",
"id":1,
"age" : 18,
conpangId":1
"name" :"jzj",
"phone:"15536B1223*"
"enail":" jzj@ enail.coa""id” :2.
"age":34，
companyId";2
nane":"beixigitan".
phone":"1553661223*"enail":"beixigitan@enail.con
"id” 3,
age":43,coapanyId" :3
]."canpanies":[
"id”:1，
"nane" :" hlibaba" ,
"description":"alibaba is good'
)，[
"id” :2，
"nane" :"Miciosoft"
"description":"microsoft is good"
).[
"id” :3.
"nane" :"coogle”,
"deseription";"Google is good"

（6）运行json-server，命令如下：

npm run json:server

接着我们利用Axios访问json-server服务器中的数据，对数据列表进行增、删、查操作。

（1）router是VueRouter的一个对象，通过Vue.use（VueRouter）和VueRouter构造函数得到一个router的实例对象，这个对象是一个全局的对象，它包含了所有的路由并且也包含了许多关键的对象和属性，代码如下：

$ router.push({path:'home'});　　  　　//切换路由,有history记录
$ router.replace({path:'home'});      //替换路由,没有历史记录

（2）route是一个跳转的路由对象，每一个路由都会有一个route对象，它是一个局部的对象，可以获取对应的name、path、params、query等。
$ route.path、$ route.params、$ route.name、$ route.query这几个属性很容易理解，主要用于接收路由传递的参数。