我们在构建应用时需要访问一个API并展示数据,做这件事的方法有好几种,而使用基于Promise的HTTP客户端axios则是其中非常流行的一种。
//获取全部数据
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
也可以下载文档创建新的axios.js下载之后直接引入稳定性更高
同步更新axios.js离线手册下载地址: https://unpkg.com/axios/dist/axios.min.js
//引入axios.js
127.0.0.1.+端口号
localhost:+端口号
都是访问本机
<script src="./axios.js"></script> //发送get请求
axios.get("http://localhost:3000/getone")//url地址
.then(function(data){
console.log(data)
})
//获取一条数据(get请求)
axios.get('http://localhost:3000/getone/2')
.then(function(data){
console.log(data)
})
//添加一条数据(post请求)
axios.post("http://localhost:3000/getone",{
status:false,
title:"来了老弟"
}).then(function(){
console.log(d)
}).catch(function(error){
console.log(error)
})
//删除一条数据(delete请求)
axios.delete('http://localhost:3000/getone/1')
.then(function(d){
console.log(d);
})
.catch(function(error){
console.log(error)
})
//修改又一条数据(put请求)
axios.put('http://localhosl:3000/getone/3',{
title:"hello,wrod"
})
.then(function(d){
console.log(d);
})
.catch(function(error){
console.log(error)
})
cdn 方式引入 qs 库的使用方法
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
// 一般引入 qs 库都赋值为 qs,不过浏览器全局引入的是 window.Qs 对象,
// 所以直接用 qs.stringify () 会报 qs undefined
var qs = Qs
// 配置 post 的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//qs.stringify () 这里可以做一下封装
axios.post('url', qs.stringify({
id: 1,
name: 'zhangsan'
})).then(function(res) {
// 返回 Promise 对象数据
})
</script>