axios 基础介绍

简介

axios 是一个专注于网络请求的库。axios只负责发请求，拿数据，不负责操作DOM，与jQuery不同。
中文官网：http://www.axios-js.com
英文官网：https://www.npmjs.com/package/axios

基本使用

安装

npm i axios -S

1 axios的基本语法

axios({method: '请求的类型',url: '请求的URL地址',// URL中的查询参数，如GET请求params: {},// 请求体参数，如POST请求data: {},
}).then((result)=>{// .then 用来指定请求成功之后的回调函数// 形参中的result是请求成功之后的结果
})

调用 axios 方法得到的返回值是 Promise 对象。
result中的数据不是接口返回的真实数据，result.data才是真实数据

2 发起 GET 请求：

axios({// 请求方式method: 'GET',// 请求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查询参数params: {id: 1}
}).then(function (result) {console.log(result)
})

3 发起 POST 请求：

axios结合async await 发起post请求

document.querySelector('#btnPost').addEventListener('click',async function(){// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await// await 只能用在被 async 修饰的方法中const result = await axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}})// .then((result)=>{//     console.log(result)// })// .then 可以使用 async await 简化console.log(result)// 如果不加 await 打印出来的就是 Promise 对象})

使用解构赋值得到服务器接口返回的数据

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

1 调用 axios 之后，使用 async/await 进行简化
2 使用解构赋值，从 axios 封装的大对象中，把 data 数据解构出来
3 把解构出来的 data 属性，使用冒号进行重命名，一般都重命名为 {data : res}

document.querySelector('#btnPost').addEventListener('click', async function () {// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！// await 只能用在被 async “修饰”的方法中// 解构赋值的时候：使用 : 进行重命名const { data: res } = await axios({method: 'POST', url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}})console.log(res)console.log(res.data)
})

简化版的函数

基于axios.get()和axios.post()发起请求

axios.get()基本语法

axios.get('url地址',{// get参数params: {}})

示例

document.querySelector('#btnGET').addEventListener('click',async function(){const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{params: {id: 1}})console.log(res)console.log(res.data)})

axios.post()基本语法

axios.post('url地址',{// post请求体数据})

示例

document.querySelector('#btnPost').addEventListener('click',async function(){const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{ name: 'zs', age: 20})console.log(res)console.log(res.data)})