利用axios与服务器通信

在现实项目开发中，前端页面所需要的数据往往需要从服务器端获取，这肯定涉及与服务器之间的通信，Vue推荐利用axios来完成Ajax请求。本章将学习盛行的网络请求库axios，它是对Ajax的封装。由于其功能单一，只是发送网络请求，以是容量很小。axios也可以和其他框架联合利用，下面就来看一下Vue如何利用axios来请求服务器数据。
什么是axios

在现实开发中，或多或少都会举行网络数据的交互，一般都是利用工具来完成任务。现在比较盛行的就是axios库。axios是一个基于Promise的HTTP库，可以用在欣赏器和Node.js中。
axios具有以下特性：
（1）从欣赏器中创建XMLHttpRequests。
（2）从Node.js创建HTTP请求。
（3）支持Promise API。
（4）拦截请求和响应。
（5）转换请求数据和响应数据。
（6）取消请求。
（7）自动转换JSON数据。
（8）客户端支持防御XSRF。
安装axios

安装axios的方式有以下几种。1. 利用CDN安装方式
利用CDN安装方式，代码如下：

1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>2. 使用NPM安装方式

复制代码

在Vue脚手架中利用axios时，可以利用NPM安装方式，执行下面命令：

1. npm install axios  --save

复制代码

或者利用yarn安装，命令如下：

1. npm add axios  --save

复制代码

安装完成后，在main.js文件中导入axios，并绑定到Vue的原型链上。代码如下：

1. //引入axios
2. import axios from 'axios'
3. //绑定到Vue的原型链上
4. Vue.prototype.$axios=axios;

复制代码

这样配置完成后，就可以在组件中通过this.$axios来调用axios的方法发送请求。
基本用法

本节来看一下axios库的基本利用方法：JSON数据的请求、跨域请求和并发请求。
get请求和post请求
axios有get请求和post请求两种方式。
在Vue脚手架中执行get请求，格式如下：

1. this.$axios.get('/url?key=value&id=1')
2.     .then(function(response){
3.           // 成功时调用
4.       console.log(response)
5.     })
6.     .catch(function(response){
7.        // 错误时调用
8.       console.log(response)
9.     })

复制代码

get请求接受一个URL地址，也就是请求的接口；then方法在请求响应完成时触发，此中形参代表响应的内容；catch方法在请求失败时触发，此中形参代表错误的信息。假如要发送数据，以查询字符串的形式附加在URL后面，以“？”分隔，数据以key=value的形式连接，不同数据之间以“&”分隔。
假如不喜欢URL后附加查询参数的方式，可以给get请求通报一个配置对象作为参数，在配置对象中利用params指定要发送的数据。代码如下：

1. this.$axios.get('/url',{
2.         params:{

复制代码

key:value,
id:1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post请求和get请求基本一致，不同的是数据以对象的形式作为post请求的第二个参数，对象中的属性就是要发送的数据。格式如下：

1. this.$axios.post('/user',{
2.       username:"jack",
3.       password:"123456"
4.     })
5.     .then(function(response){
6.           // 成功时调用
7.       console.log(response)
8.     })
9.     .catch(function(response){
10.        // 错误时调用
11.       console.log(response)
12.     })

复制代码

吸收到响应的数据后，需要对响应的信息举行处理。例如，设置用于组件渲染或更新所需要的数据。回调函数中的response是一个对象，它的常用属性是data和status，data用于获取响应的数据，status是HTTP状态码。response对象的完备属性阐明如下：

1. {
2.   //config是为请求提供的配置信息
3.   config:{},
4.   //data是服务器发回的响应数据
5.   data:{},
6.   //headers是服务器响应的消息报头
7.   headers:{},
8.   //request是生成响应的请求
9.   requset:{},
10.   //status是服务器响应的HTTP状态码
11.   status:200,
12.   //statusText是服务器响应的HTTP状态描述
13.   statusText:'ok',
14. }

复制代码

乐成响应后，获取数据的一般处理形式如下：

1. this.$axios.get('http://localhost:8080/data/user.json')
2.         .then(function (response){
3.           //user属性在Vue实例的data选项中定义

复制代码

this.user=response.data;
})
.catch(function(error){
console.log(error);
})
假如出现错误，则会调用catch方法中的回调函数，并向该回调函数通报一个错误对象。错误处理一般形式如下：

1. this.$axios.get('http://localhost:8080/data/user.json')
2.         ...
3.         .catch(function(error){
4.           if(error.response){
5.             //请求已发送并接收到服务器响应，但响应的状态码不是200
6.             console.log(error.response.data);
7.             console.log(error.response.status);
8.             console.log(error.response.headers);
9.           }else if(error.response){
10.             //请求已发送，但未接收到响应
11.             console.log(error.request);
12.           }else{
13.             console.log("Error",error.message);
14.           }
15.           console.log(error.config);
16.         })

复制代码

已经相识了get和post请求，下面就来看一个利用axios请求JSON数据的示例。
首先利用Vue脚手架创建一个项目，这里命名为axiosdemo，配置选项默认即可。创建完成之后通过“cd”命令进入到项目的根目录，然后安装axios：

1. npm install axios --save

复制代码

安装完成之后，在main.js文件中配置axios，具体请参考“安装axios”末节。
完成以上步调，在目录中的public文件夹下创建一个data文件夹，在该文件夹中创建一个JSON文件user.json。user.json内容如下：

1. [
2.   {
3.    "name": "小明",
4.    "pass": "123456"
5.   },
6.   {
7.     "name": "小红",
8.     "pass": "456789"

复制代码

}
]提示：JSON文件必须要放在public文件夹下面，放在其他位置是请求不到数据的。
然后在HelloWorld.vue文件中利用get请求JSON数据，此中http://localhost:8080是运行axiosdemo项目时给出的地址，data/user.json指public文件夹下的data/user.json。具体代码如下：

1. <template>
2.   <div class="hello"></div>
3. </template>
4. <script>
5. export default {
6.   name: 'HelloWorld',
7.   created() {
8.    this.$axios.get('http://localhost:8080/data/user.json')
9.            .then(function (response) {
10.              console.log(response);
11.            })
12.            .catch(function(error){
13.              console.log(error);
14.            })
15.   }
16. }
17. </script>

复制代码

在谷歌欣赏器中输入http://localhost:8080运行项目，打开控制台，可发现控制台中已经打印了user.json文件中的内容

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。