axios - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

Axios 是专注于网络数据请求的库

相比原生的 XMLHttpRequest 对象， axios 简单易用

相比 jquery，axios 更加轻量化，只专注于网络数据请求

axios 发起 get 请求的语法：

axios.get('url', { params:{ 参数 } }).then(callback)

具体请求实例如下：

	// 请求的 URL 地址
	const url = 'http://www.liulongbin.top:3006/api/get'

	// 请求的参数对象
	const paramsObj = {name: 'zs', age: 20}

	// 调用 axios.get () 发起 GET 请求
	axios.get(url, {params: paramsObj}).then((res) => {
	//res.data 才是服务器返回的数据
	let result = res.data
	console.log(result)
	})

axios.post('url',{ 参数 }).then( callback )

具体请求实例如下：

	// 请求的 url 地址
	const postUrl = 'http://www.liulongbin.top:3006/api/post'

	// 要提交到服务器的数据
	const dataObj = {location: '北京', address: '顺义'}

	// 调用 axios.post () 发起 POST 请求

	axios.post(postUrl, dataObj).then((res) => {
	//res.data 才是服务器发送的数据
	let result = res.data
	console.log(result)
	})

asiox 也提供了类似 jQuery 中 $.ajax () 的函数，语法如下：

	axios({
	method: 'GET',
	url: 'http://www.liulongbin.top:3006/api/get',
	params: { // GET 参数要通过 params 属性提供
	name: 'zs',
	age: 20
	}
	}).then((res) => {
	console.log(res.data)
	})

	axios({
	method: 'POST',
	url: 'http://www.liulongbin.top:3006/api/post',
	data: { // POST 数据要通过 data 属性提供
	location: '北京',
	address: '顺义'
	}
	}).then((res) => {
	console.log(res.data)
	})

可以使用结构赋值

	async btnGet() {
	const {data: res} = await axios({
	method: 'GET',
	url: 'http://www.liulongbin.top:3006/api/get',
	params: { // GET 参数要通过 params 属性提供
	name: 'zs',
	age: 20
	}
	})
	console.log(res)
	}