Axios 是一个基于 promise(异步实现) 的 HTTP 库,可以用在浏览器和 node.js 中使用,原生的js或者使用jquery来发生请求进行前后端数据交互,代码写起来过于复杂。
axios官网链接
1、安装axios
方式一:使用 npm安装
npm install axios
方式二:直接通过script全局引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、axios发送get请求
案例一:get请求
const res = axios.get('http://127.0.0.1:5000/api/...')
//then 请求成功的处理。通过链式调用catch请求失败的处理
// 请求成功返回一个Promise对象,通过回调函数接受,data获取数据,status获取状态码
res.then(function(response){console.log('请求成功:'response.data)
}).catch(function(error){
console.log('请求失败的',error)
})
案例二:get请求参数传递
使用axios发送get请求传递查询字符串参数,有如下两种方式
方式一:直接写在url地址中,问号隔开
const res = axios.get("http://127.0.0.1:5000/api/...?name='test'")
方式二:使用params进行传递
const res = axios.get('http://127.0.0.1:5000/api/pro_list',{params: {"name":"musen"}} )
3、axios发送post请求
1.传递json格式的参数
axios.post('http://127.0.0.1:5000/api/login',{pwd: 'lemonban',user: 'python01'} )
2.传递表单类型的参数
// 构建一个表单参数对象
var params = new URLSearchParams();
params.append('user', 'ming');
params.append('pwd', '12345'); axios.post('http://127.0.0.1:5000/api/login', params)
3.请求配置项
举例:
headers:是即将被发送的自定义请求头
baseURL:通过设置一个 baseURL便于为 axios 实例的方法传递相对 url
axios.post('/api/login',{pwd: 'lemonban',user: 'python01'},{headers:{token:'token'},baseURL:'http://127.0.0.1:5000'})
4、全局的axios配置
配置后默认所有接口请求都会生效
// 配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:5000'
//配置请求头信息
axios.defaults.headers.common['token'] = 'token'
//配置请求类型
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
const res = axios.get('/api/...').then(function(response){console.log('请求成功:'response.data)
}).catch(function(error){
console.log('请求失败的',error)
})
针对多个后端服务的场景可以创建多个axios对象来配置不同的信息
// 创建axios对象A
const requestA = axios.create({baseUrl:'http://127.0.0.1:5000'})
// 创建axios对象B
const requestB = axios.create({baseUrl:'http://127.0.0.1:5000'})
requestA.then(function(response){console.log('请求成功:'response.data)}).catch(function(error){console.log('请求失败的',error)})
requestB.then(function(response){console.log('请求成功:'response.data)}).catch(function(error){console.log('请求失败的',error)})