axios学习笔记
文章目录
- axios学习笔记
- 一.axios的get方式请求接口
- 静态接口数据请求方式
- 动态接口请求方式
- 二.axios的post方式请求接口
- json格式提交
- form提交
- file提交
- 单个文件提交
- 多个文件提交
- 三.axios的并发
- 四.axios的自定义实例
- 五.axios拦截器
axios学习笔记
使用axios前要引入axios文件
一.axios的get方式请求接口
静态接口数据请求方式
//1
axios.get('url') //获取数据
.then(res => console.log(res)) //显示数据
.then(err => promise.reject(err)) //报错处理
//2
axios({ //axios默认数据请求方式是 get
url: 'url'
}).then(res => console.log(res ))
.catch(err => Promise.reject(err))
动态接口请求方式
axios.get('url',{
params: { //参数
参数:'值'
}
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
二.axios的post方式请求接口
json格式提交
axios.post('url',{
username: '', //提交的数据
password: ''
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
form提交
const p = new URLSearchParams()
p.append('username','') //提交的数据
p.append('password','')
axios.post('url',p,{
headers: { //请求头
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
file提交
单个文件提交
const p = new FormData()
p.append('file',e.target.files[0]) //文件
axios.post('url',p,{
headers: { //请求头
'Content-Type': "multipart/form-data"
}
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
多个文件提交
const p = new FormData()
p.append('filename','') //文件名
p.append('file',e.target.files[0]) //文件
axios.post('url',p,{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
三.axios的并发
<body>
<div id="app">
<button @click="send"> 发送 </button>
<button @click="sendMore"> 执行多个并发请求 </button>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
//! 同时发两个数据请求，如何做？
new Vue({
el: '#app',
methods: {
sendMore () {
const p1 = new Promise((resolve,reject) => {
resolve(1)
})
const p2 = new Promise((resolve,reject) => {
setTimeout(function () {
resolve(1)
},3000)
})
axios.all([p1,p2])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
console.log(acct,perms) //直接得到结果
}));
},
send () {
const p1 = new Promise((resolve,reject) => {
resolve(1)
})
const p2 = new Promise((resolve,reject) => {
setTimeout(function () {
resolve(1)
},3000)
})
axios.all([p1,p2]).then(res => console.log( res )) //得到的是数组
}
}
})
</script>
四.axios的自定义实例
const ins = axios.create({
baseURL: 'http://59.110.226.77:3000',//统一设置项目中的后端地址
timeout: 4000
headers: { 'Content-Type': 'multipart/form-data'},
})
五.axios拦截器
<style>
.loading-box{
position: fixed;
left: 0;top:0;
width: 100%;height: 100%;
background: rgba(0,0,0,.7);
color: white;
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="loading-box"> 加载中 </div>
<div id="app">
<input type="text" v-model="username" placeholder="请输入用户名"> <br>
<input type="text" v-model="password" placeholder="请输入密码">
<button @click="postForm"> 动态数据请求 - post-表单提交 </button>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../../lib/vue.js"></script>
<script>
const loadingBox = document.querySelector('.loading-box')
loadingBox.style.lineHeight = document.documentElement.clientHeight + 'px'
const ins = axios.create({
baseURL: 'http://59.110.226.77:3000',//统一设置项目中的后端地址
timeout: 4000,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
ins.interceptors.request.use(function (config) {
loadingBox.style.display = 'block'
return config
},function (err) {
return Promise.reject(err)
})
// 响应拦截器
ins.interceptors.response.use(function (res) {
loadingBox.style.display = 'none'
return res // res就是请求得到的结果
},function (err) {
return Promise.reject(err)
})
new Vue({
el: '#app',
data: {
username: '',
password: '',
},
methods: {
postForm () {
const p = new URLSearchParams()
p.append('username',this.username)
p.append('password',this.password)
ins.post('/api/user/login',p,{
}).then(res => console.log(res))
.catch(err => Promise.reject(err))
},
}
})
</script>