一文学会Axios的使用_代码007(未授权)

本文介绍: Promise 的编程模型依然充斥着大量的 then 方法，虽然解决了回调地狱的问题，但是在语义方面依然存在缺陷，代码中充斥着大量的 then 函数，这就是 async/await 出现的原因。浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。异步发送请求过程如下浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。相信到了这里，大家对axios的基础使用有了基本的了解，接下来，我们就好好研究一下我们的。我们的入门案例中就使用的是get请求。

异步.png

我们先来看一下axios的基础版本ajax，这里大家了解即可！

//2. 发送ajax请求
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
  xhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet);
           xhttp.send();

//2.3. 获取响应
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //处理响应的结果
  }
};

可以看出，前端给后端发送请求，主要由三部分组成：

其实，axios是由ajax封装得来的，他简化了ajax的重复工作，使我们工作更简单

我们以get请求为例来来研究axios的使用
方法一：

this.$axios.get('http://localhost:8080/goods.json?id=1',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})

this.$axios({
		method: 'get',
		url: 'http://localhost:8080/goods.json?id=1',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

在日常代码编写中，方式一更常用
这里我们其实可以优化，将 this.$ 来省略

axios.get('http://localhost:8080/goods.json?id=1',{
      params: {
                id:1
            }
  }).then(res=>{
      console.log(res.data);
    },err=>{
      console.log(err);
  })

这里的请求中,我们主要指定请求后端路径
这里的响应中，我们使用.then来访问，使用res=>{ }来获取响应的数据

axios.get('http://localhost:8080/goods.json?id=1',{
      params: {
                id:1
            }
  }).then(res=>{
      console.log(res.data);
    })

axios.post('/url',{
  id:1
}).then(res=>{
  console.log(res.data);
})

axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
})

let data = {
	//请求参数
}

let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}

axios.post('/goods.json',formdata).then(res=>{
	console.log(res.data);
})

axios.put('/url',{
  id:1
}).then(res=>{
  console.log(res.data);
})

axios.patch('/url',{
  id:1
}).then(res=>{
  console.log(res.data);
})

this.$axios.delete('/url',{
				params: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

axios.delete('/url',{
  data: {
    id:1
  }
}).then(res=>{
  console.log(res.data);
})

axios({
    method: 'delete',
    url: '/url',
    params: { id:1 }, //以明文方式提交参数
    data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
	console.log(res.data);
})

 this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

// vue2 格式
async sendReq() {
  const resp = await axios.get('http://localhost:8080/goods');
}

// vue3格式
const sendReq = async () => {
  const resp = await axios.get('http://localhost:8080/goods');
}