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这几个属性很容易理解,主要用于接收路由传递的参数。