axios 返回 转换 json_Vue学习笔记-08 使用Axios与服务器进行数据交互

前面的学习基本上已经满足了我们开发一个 vue 单机项目了，但是在实际的开发中，我们还需要与后端交互，从后端获取我们需要展示的数据。

于是我们需要学习 Axios 。

Axios 是什么

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。http 库就是用来发起 http 请求与服务器交互的函数库。

它有以下功能特性：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

如何使用 Axios

Axios 也需要先通过 npm 安装：

npm install axios

使用时，直接引入，然后使用 axios 对象对应的方法即可，比如说这里用之前的自定义组件模拟一个 get 请求：

{ {this.label}}

运行以后，短暂延迟后(网络请求)，可以看到请求回来的数据已经被展示出来了：

这里因为 axios 自动帮我们把请求回来的数据转化成了 json 格式，所以我们可以直接通过点语法 response.data.bpi 来获取我们想要的字段。

get 请求也可以省略方法名进行简写：

axios('https://api.coindesk.com/v1/bpi/currentprice.json')    .then(response => (this.label = response.data.bpi))

如果要传递参数，则可以在请求后面添加：

axios    .get('http://request/url',{    params: {      ID: 12345    }  })    .then(response => (this.label = response.data.bpi))

如果要发起 post 请求，只需要把 get 方法换成 post 方法即可，用法没有区别：

axios    .post('http://request/url',{        params: {            ID: 12345        }    })    .then(response => (this.label = response.data.bpi))

因为 Axios 是基于 promise 的，所以我们可以直接使用 .then() 来进行请求后的操作，同时也可以链式调用 .catch() 对错误进行处理：

axios    .post('http://request/url',{        params: {            ID: 12345        }    })    .then(response => (this.label = response.data.bpi))    .catch(error => (this.label = error))

同样，axios 也可以使用对象风格的写法：

axios({        url:'https://api.coindesk.com/v1/bpi/currentprice.json',        method:'get',        params:{            id:12345        }    }).then(response =>