jQuery ? NO, Axios——请求数据

axios也是一个JS库，我们今天要说的是使用axios来进行我们的Ajax请求

那么问题来了，我们为什么要放着jQuery不用，用axios呢？

因为这个JS库是专门用于网络数据请求的库，它有着俩个优点：相比于原生XMLHttpRequest对象毋庸置疑它非常的简洁方便；相比于jQuery更加的小（文件轻量），更加的专业专一（专注网络数据请求）

和jQuery相同，都有get请求方式,post请求以及在函数内部指定请求三种方式来请求Ajax

我们通过代码和请求状况来入门axios：

一.GET请求：

二.POST请求：

请求成功：

三.内部请求：

一.GET请求：

我们调用axios方法发起请求后的返回值是一个Promise对象，也就是说返回值res不是一个真正的数据

const btn1 = document.querySelector('#button1')btn1.addEventListener('click',function(){//请求地址const url = "http://www.XXXXXXXX/api/get"//URL中的查询参数const pObj = {name:"小蜗",age:22}axios.get(url,{params:pObj}).then(function(res){console.log(res.data)})})//ES6新语法（解构赋值）
const btn1 = document.querySelector('#button1')btn1.addEventListener('click',async function(){//请求地址const url = "http://www.XXXXXXXX/api/get"//URL中的查询参数const pObj = {name:"小蜗",age:22}const {data : res} = await axios.get(url,{params:pObj})console.log(res.data)})

二.POST请求：

const btn2 = document.querySelector('#button2')btn2.addEventListener('click',function(){const url = "http://www.XXXXXXXXXX/api/post"const obj = {name:"小蜗",age:22}axios.post(url,{data:obj}).then(function(res){console.log(res.data)})})//或者我们post请求不需要去书写data，直接在对象中写入数据就可以了
const btn2 = document.querySelector('#button2')btn2.addEventListener('click',function(){const url = "http://www.XXXXXXXXXX/api/post"const obj = {name:"小蜗",age:22}axios.post(url,{obj}).then(function(res){console.log(res.data)})})//ES6新语法（解构赋值）
const btn2 = document.querySelector('#button2')btn2.addEventListener('click',async function(){const url = "http://www.XXXXXXXXXX/api/post"const obj = {name:"小蜗",age:22}const {data : res} = await axios.post(url,{obj})console.log(res.data)})

请求成功：

三.内部请求：

axios({

method:'请求的类型post/get',

url:'URL',

data:{

post数据(get请求没有data)

},

params:{

get参数(post没有params)

}

}).then(回调函数)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id="app"><button>点击发起POST请求</button></div><script>const btn = document.querySelector('button')btn.addEventListener('click',function(){axios({method:'POST',url:'http://www.XXXXXXXXXX',data:{name:'小蜗',age:22}}).then(function(res){console.log(res.data);})})</script>
</body>
</html>

因为axios的返回值是一个promise对象，所以我们还可以使用await搭配async得到值：

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){const res = axios({method:'POST',url:'http://www.XXXXXXXXXX',data:{name:'小蜗',age:22}})console.log(res)
})

tips：如果调用某个方法的返回值是promise对象，那么我们就可以在前面使用await

如果我们使用了await的话，还需要使用async来修饰方法

我们可以使用解构赋值来得到数据：

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){const {data} = await axios({method:'POST',url:'http://www.XXXXXXXXX',data:{name:'小蜗',age:22}})console.log(data)
})

如果我们想要直接获取到数据条，可以data.data来获取到，但是这样不便利于阅读，所以我们可以使用：res来将解构出来的data重命名为res，使用res.data来获取输出数据

const btn = document.querySelector('button')
btn.addEventListener('click',async function(){const {data : res} = await axios({method:'GET',url:'http://www.liulongbin.top:3006/api/getbooks'})console.log(res.data)
})

更多请参考官方文档： axios中文文档|axios中文网 | axios欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答，什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests 从 nodehttp://www.axios-js.com/zh-cn/docs/