axios的详述

最新推荐文章于 2022-07-31 16:14:42 发布

qq_31749421

最新推荐文章于 2022-07-31 16:14:42 发布

阅读量238

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_31749421/article/details/105902673

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

axios的介绍

/**
 *
 * 1. 安装 npm i axios
 * 2. 引入
 *   node : const axios = require('axios')
 *   浏览器 : <script src='..'></script>
 *
 */

const axios = require('axios')
// > http://localhost:3000/list

/**
 *  GET
 */
//1. 获取全部数据
// 参数 : url地址接口
axios.get('http://localhost:3000/list').then(res => {
  console.log(res)
})

具体的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
      /**
       *  GET
       */
      //1. 获取全部数据
      // 参数 : url地址接口
      // axios.get('http://localhost:3000/list').then(res => {
      //   console.log(res)
      // })
      //2. 获取具体某一个
      // axios.get('http://localhost:3000/list/3').then(res => {
      //   console.log(res)
      // })

      //3. 获取具体某一个  id 作为 参数
      // 格式 : axios.get(url,config)
      // 配置项 config: {  params(对象) 参数, headers(对象) : 请求头  }
      // axios
      //   .get('http://localhost:3000/list', {
      //     params: {
      //       id: 4
      //     },
      //     headers: {}
      //   })
      //   .then(res => {
      //     console.log(res)
      //   })

      /**
       * post  添加
       * post 添加是不需要传id的
       */
      // 格式   axios.post(url, data)
      //  axios.post('http://localhost:3000/list',{
      //    name : '丽丽',
      //    done : false
      //  }).then(res => {
      //    console.log(res);
      //  })

      /**
       * delete 删除
       */
      // axios.delete('http://localhost:3000/list/5').then(res => {
      //   console.log(res)
      // })

      /**
       * put / patch 修改
       */
      //  axios.put('http://localhost:3000/list/6',{
      //    name :'春春3号',
      //    done : false
      //  }).then(res => {
      //    console.log(res);

      //  })

      axios
        .patch('http://localhost:3000/list/6', {
          name: '春春4号'
        })
        .then(res => {
          console.log(res)
        })
    </script>
  </body>
</html>

详细的示例

;(function(window) {
	'use strict'

	// 开始的是,就要从本地获取list数据
	// let list = JSON.parse(localStorage.getItem('list')) || []

	// 实例化vue
	const vm = new Vue({
		el: '#app',
		data: {
			list: [],
			// 任务名称
			todoName: '',
			// 编辑id
			editId: -1
		},
		created() {
			// this.list = JSON.parse(localStorage.getItem('list')) || []
			// 获取全部数据 演示:get
			axios.get('http://localhost:3000/list').then(res => {
				console.log(res.data)
				this.list = res.data
			})
		},
		methods: {
			/**
			 * 添加任务
			 */
			addTodo() {
				// if (e.keyCode === 13) {
				// console.log(this.todoName)

				// 判断如果input值为空,
				if (this.todoName.trim().length === 0) {
					return
				}

				// 处理id 取 数组里最后一个元素的id+1
				// const id =
				// this.list.length === 0 ? 1 : this.list[this.list.length - 1].id + 1

				// 添加到数组里面
				// this.list.push({
				// 	id,
				// 	name: this.todoName,
				// 	done: false
				// })
				// 添加任务 post
				axios
					.post('http://localhost:3000/list', {
						name: this.todoName,
						done: false
					})
					.then(res => {
						// console.log(res.data)
						// 把新加的对象,添加到list,更新视图
						this.list.push(res.data)
					})

				// 清空input里的值
				this.todoName = ''
				// }
			},
			/**
			 * 删除任务
			 */
			delTodo(id) {
				// console.log(id)
				// 拿到id,直接删除不好删, 过滤, 过滤出来不等于当前id的元素,新的数组,
				// 把之前的list覆盖掉就可以了
				// this.list = this.list.filter(item => item.id != id)
				axios.delete(`http://localhost:3000/list/${id}`).then(res => {
					console.log(res)
					this.list = this.list.filter(item => item.id != id)
				})
			},
			/**
			 * 显示编辑状态
			 */
			showEdit(id) {
				console.log('123')
				this.editId = id
			},
			/**
			 * 隐藏编辑状态
			 */
			hideEdit(e) {
				console.log(e.target.value)

				// 修改
				axios
					.patch(`http://localhost:3000/list/${this.editId}`, {
						name: e.target.value
					})
					.then(res => {
						console.log(res)
					})

				this.editId = -1
			},
			/**
			 * 底部的显示与隐藏
			 */
			isFooterShow1() {
				console.log('重新计算了')

				return this.list.length > 0
			},
			/**
			 * 清除已完成的
			 */
			clearCompleted() {
				// 清除已完成的(done:true) , 其实就是想过滤出来 未完成的(done:false)
				this.list = this.list.filter(item => !item.done)
			},
			// 状态改变
			stateChange(id) {
				//1.根据id 拿到 list的对象
				let todo = this.list.find(item => item.id == id)

				//2. 发送请求修改
				axios
					.patch(`http://localhost:3000/list/${id}`, {
						done: !todo.done
					})
					.then(res => {
						console.log(res.data.done)
					})
			}
		},
		computed: {
			// 底部的显示与隐藏
			isFooterShow() {
				return this.list.length > 0
			},
			// 剩余未完成的个数
			itemLeftCount() {
				return this.list.filter(item => !item.done).length
			},
			// clearCompleted 的显示与隐藏
			isClearCompletedShow() {
				// 如果只要有一个以上完成的 => 显示(true)
				// some 只要有一个满足条件的,返回 true
				return this.list.some(item => item.done)
			}
		}
		// 监听器
		// watch: {
		// 	list: {
		// 		// 深度监听
		// 		deep: true,
		// 		// 处理
		// 		handler(newVal) {
		// 			console.log('改变了')
		// 			// 监听到数组的变化 ,保存到本地
		// 			// 以后不要直接把数组保存到本地,转化为字符串
		// 			localStorage.setItem('list', JSON.stringify(newVal))
		// 		}
		// 	}
		// }
	})
})(window)