一、axios常用请求方法
请求方法：对服务器资源，要执行的操作
常用的请求方法有以下几种
（1）提交数据
使用场景：当数据需要保存在服务器上的时候
例如我们在注册账户时，注册完以后需要把账户的信息存入服务器里，以便下次登录的时候可以从服务器里拿到该账户信息，那么注册的时候就需要用到POST了
（2）使用语法
axios({
url:'目标资源',
method:'请求方法',
data:{
参数名:值
}
}).then(result=>{
//对服务器返回的数据做后续处理
})url：请求的URL网址
method:请求的方法（不区分大小写）
data:提交数据
注意：在使用GET方法可以省略不写的，也就是说如果我们需要获取服务器的数据我们可以这么写
axios({
url:'目标资源',
//method:'请求方法',//直接把这行注释掉，
data:{
参数名:值
}
}).then(result=>{
//对服务器返回的数据做后续处理
})（3）代码示例如下
（这是一个接口文档，在后面的学习中会讲解的）
现在我们知道了注册账号的URL地址：https://hmajax.itheima.net/api/regist
请求方法：POST
参数名：username 用户名（中英文和数字组成，最少8位） password 密码（最少6位）
然后根据语法对应写进去
axios({
url: 'http://hmajax.itheima.net/api/register',
//指定请求方法
method: 'post',
data: {
username: 'itheima789',
password: '123456'
}
}).then(result => {
console.log(result)
})
})
完整示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05.常用请求方法和数据提交</title>
</head>
<body>
<button class="btn">注册用户</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
注册用户: http://hmajax.itheima.net/api/register
请求方法: POST
参数名:
username: 用户名 (中英文和数字组成, 最少8位)
password: 密码 (最少6位)
目标: 点击按钮, 通过axios提交用户和密码, 完成注册
*/
const btn = document.querySelector('.btn')
btn.addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
//指定请求方法
method: 'post',
data: {
username: 'Orange11',
password: '123456'
}
}).then(result => {
console.log(result)
})
})
</script>
</body>
</html>
如果不确定我们的数据是否已经传入服务器，我们可以用该账户再次点击注册，如果我们之前的数据已经传入服务器，那么再用该账户昵称注册肯定会失败的
这样就说明了我们之前的账户已经注册成功了
二、axios错误处理
（1）使用场景
在实际开发中，在使用axios与服务器进行数据交互时会遇到一些错误，当我们想把错误原因返回给用户页面端，就需要使用axios错误处理了。
例如上述列子，我们将已经注册过的账户再次进行注册，那么肯定会报错的，因为账户是唯一性的，那么我们现在需要处理的就是将后台报错的信息显示在页面上。
（2）使用语法
在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
//请求选项
}).then(result=>{
//处理数据
}).catch(error=>{
//错误处理
})完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06.axios错误处理</title>
</head>
<body>
<button class="btn">注册用户</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
注册用户: http://hmajax.itheima.net/api/register
请求方法: POST
参数名:
username: 用户名 (中英文和数字组成, 最少8位)
password: 密码 (最少6位)
目标: 点击按钮, 通过axios提交用户和密码, 完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
// 指定请求方法
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
}).then(result => {
console.log(result)
}).catch(error => {
//处理错误信息
console.log(error)
console.log(error.response.data.message)
alert(error.response.data.message)
})
})
</script>
</body>
</html>
三、HTTP协议—请求报文
HTTP协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容
（1）请求报文的组成部分
请求行：请求方法，URL，协议
请求头：以键值对的格式携带的附加信息，比如：Content-Type
空行：分隔请求头，空行之后的是发送给服务器的资源
请求体：发送的资源
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
})
（2）如何查看请求报文
首先打开开发者工具（F12），点击网络->消息头（请求行和请求头）->请求（请求体）
下列是我们的请求行和请求头
下列是我们的请求体
注意：请求报文一般是用来错误排查
四、HTTP协议—响应报文
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容
（1）响应报文的组成部分
响应行（状态行）：协议、HTTP响应状态码，返回给浏览器的内容
响应头：以键值对的格式携带的附加信息，比如：Content-Type
空行：分隔响应头，空行之后的是服务器返回的资源
响应体：返回的资源
（2）如何查看响应报文
响应报文和请求报文是查看方式是一样的
注意：HTTP响应状态码是我们需要特别关注的
五、HTTP响应状态码
HTTP响应状态码：用来表明请求是否成功完成
比如：我们刚才出现的400就是客户端错误，还有经常见的404（服务器找不到资源）
六、接口文档
接口文档：描述接口的文章（后端工程师告知）
接口：使用AJAX和服务器通讯时，使用的URL，请求方法以及参数
我们在注册账号时，就需要根据接口文档来将相关的信息写入代码中
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
})
