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.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
（3）在初始化的项目中安装json-server，实行如下命令：
- npm install json-server --save
- "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"
接着我们利用Axios访问json-server服务器中的数据，对数据列表举行增、删、查操纵。
（1）router是VueRouter的一个对象，通过Vue.use（VueRouter）和VueRouter构造函数得到一个router的实例对象，这个对象是一个全局的对象，它包罗了全部的路由并且也包罗了许多关键的对象和属性，代码如下：
- $ router.push({path:'home'}); //切换路由,有history记录
- $ router.replace({path:'home'}); //替换路由,没有历史记录
$ route.path、$ route.params、$ route.name、$ route.query这几个属性很容易理解，主要用于吸收路由通报的参数。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
