axios 发起请求，基本用法

axios 发起请求

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios 是一个专注于网络请求的库！

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Axios中文网： http://www.axios-js.com
使用 cdn:

 //先导入axios库文件才可使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

• 基本使用

const result = axios({
                method: 'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks'
            })
            //console.log(result);  //调用axios 方法得到的返回值是 Promise 对象
        result.then((books) => console.log(books.data))  //axios在请求到数据之后，在真正的数据之外 套了一层壳 books不是真实数据，books.data才是真实数据

1. 发起 GET 请求：

   axios({
                   method: 'get',
                   url: 'http://www.liulongbin.top:3006/api/getbooks',
                   params: { //get传参
                       id: 1
                   },
                   data: {} //post 传参
               }).then((result) => console.log(result)) //套完壳后的数据
   

2. 发起 POST 请求：

axios({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    age: 20,
                    name: "zs"
                } //post 传参
            }).then((result) => console.log(result)) 

3. await/async 简化.then 操作

   • 如果调用某个方法的返回值是Promise 实例，则前面可以添加 await

   • await 只能用在被 async 修饰的方法中

   • 如果在 function 中使用了await ，则function 必须被 async 修饰

btn.addEventListener("click", async function() {
            const result = await axios({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    age: 20,
                    name: "zs"
                } 
            })
            console.log(result.data);
        })

4. 结构赋值

//POST
btn.addEventListener("click", async function() {
   const {data } = await axios({  //只获取data  属性
                    method: 'post',
                    url:'',
                    data: {}
                })
                console.log(data); //真正数据对象
            })

//GET
btn.addEventListener("click", async function() {
 //结构赋值  使用: 重命名
 const {data:res} = await axios({
                    method: 'get',
                    url: '',
                })
               //console.log(data.data); 第一个data 返回真实的数据对象，.data返回的是图书列表
                console.log(res.data);
            })

5. axios直接发起GET和POST请求

 //  GET
btn1.addEventListener("click", async function() {
const {data: res} = await axios.get('url', {
                    params: {id: 1}
                 })
                console.log(res);
            })

//POST
btn2.addEventListener("click", async function() {
const {data: res} = await axios.post('url', {
                data: {
                    age: 20,
                    name: "zs"
                    }
            })
            console.log(res);
        })

具体Promise和async/await的理解，参考主页另一篇