因为 Vue 2.0 学习笔记(三) 中提及了ajax请求数据中的axois,这里做一下回顾。
axios是前端最火的,基于 promise 的专注于数据请求的HTTP库,可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
主流浏览器最新版均支持,IE8+支持。
一、axios基本语法
1、导入库文件
以 当前目录下的lib文件夹中放有axios.js文件 为例
<script src="./lib/axios.js"></script>
补充:使用cdn安装
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、基本语法使用
如果要携带请求体,比如POST请求方法,参数应该放在data:{}对象里;如果发的是GET请求,URL地址中包含参数,应该写在params:{}对象里。(这两个对象中不需要的可以不写)
(1)发起GET请求
* 顺便解释一下返回数据的原理
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://www.liulongbin.top:3006/api/getbooks', //一个接口网站
// URL 中的查询参数
params: {
id: 1
},
// 请求体参数
data: {}
}).then(function (result) {
// .then用来指定请求成功之后的回调函数
// 形参中的result是请求成功后的结果
console.log(result)
})
打印请求得到的结果result:
![](https://i-blog.csdnimg.cn/blog_migrate/2a398c841bca3b91b3eca6a48fa54fab.png)
在postman(API管理工具)里查看到服务器返回的数据:
![](https://i-blog.csdnimg.cn/blog_migrate/b83896b94c789c48edc9b98192758d55.png)
所以result并不是服务器返回的数据
查看data属性:
![](https://i-blog.csdnimg.cn/blog_migrate/54f4ed5349da659f3894e9429d823c66.png)
所以服务器返回的数据应该是result.data
原理:
![](https://i-blog.csdnimg.cn/blog_migrate/fecf53e660083763caf6600534de30dd.png)
(2)发起POST请求
<button id="btnPost">发起POST请求</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click', async function () {
// 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
// await 只能用在被 async “修饰”的方法中
//把得到的对象解构赋值 data是服务器真正返回的对象
const { data } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post', //一个接口网站
data: {
name: 'zs',
age: 20
}
})
console.log(data)
})
</script>
补充:如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await
await 只能用在被 async “修饰”的方法中
GET解构也同理:
<button id="btnGet">发起GET请求</button>
...
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnGet').addEventListener('click', async function () {
// 解构赋值的时候,使用 : 进行重命名
// 1. 调用 axios 之后,使用 async/await 进行简化
// 2. 使用解构赋值,从 axios 封装的大对象中,把 data 属性解构出来
// 3. 把解构出来的 data 属性,使用 冒号 进行重命名,一般都重命名为 { data: res }
const { data: res } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks' //一个接口网站
})
console.log(res.data)
})
</script>
二、axios直接发起GET和POST请求
1、发GET请求
<button id="btnGET">GET</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnGET').addEventListener('click', async function () {
/* axios.get('url地址', {
// GET 参数
params: {}
}) */
const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', //一个接口网站
{
params: { id: 1 }
})
console.log(res)
})
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/2da5baba968db71157733b88a607e1af.png)
2、发POST请求
<button id="btnPOST">POST</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPOST').addEventListener('click', async function () {
// axios.post('url', { /* POST 请求体数据 */ })
const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
console.log(res)
})
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/c0cd339756815790e44053035150d776.png)
三、vue-axios
基于Vue的轻度封装
1、安装
CommonJS:
npm install --save axios vue-axios |
将下面代码加入入口文件:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
2、Script引入
按照这个顺序分别引入这三个文件: vue
, axios
and vue-axios
3、使用
示例:
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})