vue ----axios

最新推荐文章于 2022-10-12 00:01:10 发布

悠闲的线程池

最新推荐文章于 2022-10-12 00:01:10 发布

阅读量164

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44235759/article/details/121138358

版权

② vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

axios 只负责发送网络请求

基本使用
① 导入库文件，可以在window全局使用axios()
②发送请求

axios({
	method: '请求的类型', //GET
	url: '请求的 URL 地址'
}).then((result) => {
	//.then 用来指定请求后的回调
	//形参中result是请求后的结果
})

在这里插入图片描述

<body>
    <script src="./lib/axios.js"></script>
    <script>
        console.log(axios);

        //Promise {<pending>} ， 返回的是一个Promise对象
        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
        }).then(function(books){
            console.log(books);
        })
    </script>
</body>

axios传参

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

结构axios返回的promise对象

<!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>
</head>
<body>
    <button id="btnPost">发起post请求</button>
    <button id="btnGet">发起get请求</button>
    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnPost').addEventListener('click',async function(){
            /*
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 20
                }
            }).then((result) => {
                console.log(result)
            })*/

            //如果调用某个方法的返回值是 Promise实例，则前面可以添加await! 加上await后返回的就是一个结果
            //await 只能用在被 async ’修饰‘ 的方法中
            //使用解构赋值，将右侧的大对象中的 解构出data 属性
            //解构赋值的时候使用：进行从命名
            const{ data: res } = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    name: 'zs',
                    age: 20
                }
            })
            //解构出来的值是服务器返回的值，这里的data是返回值中的数据值存储的地方
            console.log(res.data);
        })

        document.querySelector('#btnGet').addEventListener('click',async function(){
            const{data: res } = await axios({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks'
            })
            console.log(res.data)
        })
    </script>
</body>
</html>

简化书写

<body>
    <button id="btnPost">发起post请求</button>
    <button id="btnGet">发起get请求</button>
    <script src="./lib/axios.js"></script>
    <script>

        document.querySelector('#btnPost').addEventListener('click',async function(){
            //post的请求参数可以省略掉 data参数直接使用对象
            const {data: res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name: 'zs',gender: '女'})
            console.log(res)
        })

        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);
        })
    </script>
</body>

悠闲的线程池

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue ----axios

axios 只负责发送网络请求基本使用① 导入库文件，可以在window全局使用axios()②发送请求axios({ method: '请求的类型', //GET url: '请求的 URL 地址'}).then((result) => { //.then 用来指定请求后的回调 //形参中result是请求后的结果})<body> <script src="./lib/axios.js"></script> <scr
复制链接

扫一扫