axios的基本用法和特性不阐述
中文文档如下
Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js (axios-http.cn)
1.安装
axios安装
npm or yarn
npm install axios
yarn add axios
亦或者使用cdn
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
qs安装(建议)
npm
npm install qs
亦或者使用cdn
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
提示
qs.parse()和qs.stringify()
这两种方法虽然都是序列化,但是还是有区别的。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
2.引入
一般项目里都是封装好的axios 这里不写全局引入 以页面引入举例
<template>
...
</template>
<script>
// axios引入
import axios from 'axios'
// qs引入(建议)
import qs from 'qs'
export default {
...
}
</script>
3.使用
以下代码未配置失败回调
.catch(error => { //失败回调 console.log(error); })
GET发送请求
无参请求 默认为GET
axios({
url: 'url',
}).then(res => {
console.log(res)
})
带参请求
axios({
url: 'url?id=1&type=2',
method: 'get',
}).then(res => {
console.log(res)
})
使用params发送请求
axios({
url: 'url',
method: 'get',
params: {id: 1}
}).then(res => {
console.log(res)
})
POST发送请求
POST请求参数会自动转换成JSON格式 如需表单格式 则可以通过qs序列化工具转换
无参请求
axios({
url: 'url',
method: 'post',
}).then(res => {
console.log(res)
})
带参请求
axios.post('接口地址',{
id:'1',
type:2
}).then(res=>{
console.log(res);
})
使用data发送请求
let _data = {
id : '1',
type : 2
}
axios({
url: 'url;',
method: 'post',
data: _data
}).then(res => {
console.log(res)
})
使用URLSearchParams传递参数发送请求
let params = new URISearlhParams();
params.append('id','1');
params.append('type', 2);
axios.post('url',params).then(res =>{
console.log(res)
})
使用qs发送表单类型数据
axios({
url: 'url',
method: 'post',
data: qs.stringify({
id : '1',
type : 2
}),
headers: {
// 不加也行
'Content-Type': 'application/x-www-form-urlencoded',
},
}).then(res => {
console.log(res)
})