vue中使用axios

@sudo

已于 2022-04-12 16:36:09 修改

阅读量1.1k

点赞数

文章标签： vue.js elementui javascript

于 2022-03-15 11:55:53 首次发布

本文链接：https://blog.csdn.net/IDpangpengcheng/article/details/123499050

版权

<!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>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div v-for="item in carlist">
			<el-card class="box-card">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						<!-- 商品名称 -->
						{{item.name}}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							1
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				// 在这里使用axios 发送请求   第一种请求方式
				axios.get('carList.json').then(res=>{
				    
					console.log(res)
					 this.carlist = res.data
				})
                /** 在这里使用axios发送请求 第二种方式
				 *  axios({methods: '请求类型',
				 *         url: '请求的url地址'}).then((result)=>{  
				 *                .then 用来指定请求成功之后的回调函数,形参中的result 是请求成功之后的结果
				 *      })
				 **/

				axios({method: 'GET',url:'carList.json'}).then(res=>{
					console.log(res)  // 返回的是一个promise对象
				})
				axios({method: 'GET', url: 'carList.json'}).then((res)=>{
					console.log(res)   //返回的是一个promise对象
				})
				//调用axios方法得到的返回值是Promise对象所以该对象可以点then(function(res){})  res是真实数据套完壳返回的Promise对象，所以要想使用真实数据需要用点点出来


				/**
				 * axios({
					 //请求方式
					 method: 'GET||POST',
					 //请求地址
					 url: 'url地址',
					 //URL 中的查询参数
					 params: {},      GET请求传参
					 //请求体参数
					 data: {}         POST请求传参
				   }).then(function(Promise对象){  处理函数})
				 **/

				 
				 /**
				  *  axios({
					 //请求方式
					 method: 'GET||POST',
					 //请求地址
					 url: 'url地址',
					 //URL中的查询参数
					 params: {},     GET请求传参
					 //请求体参数
					 data: {}        POST请求传参
				   }).then(Promise对象=> {处理函数})
				  **/



			},
		})


	</script>
</body>




</html>

<!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 () {
        //第一步：如果调用某个方法的返回值是 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)
    })

    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)  // 这就是我们实际要操作的数据
    })

    // $.ajax()   $.get()  $.post()
    // axios()    axios.get()    axios.post()    axios.delete()   axios.put()
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/axios.js"></script>
</head>
 
<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>
 
  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        console.log(res.data)
      })
    })
 
    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })
 
    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })
 
    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
</body>
 
</html>

@sudo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中使用axios

<!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>购物车</title.
复制链接

扫一扫