axios的详述axios的介绍

81 阅读 0 评论 54 点赞

我是靠谱客的博主醉熏小刺猬，最近开发中收集的这篇文章主要介绍axios的详述axios的介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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)