axios cdn 引入_axios基本使用

4,816 阅读1分钟

我们在构建应用时需要访问一个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>