axios

axios

Axios 是一个 基于 promise 的 HTTP 客户端，适用于 node.js 和浏览器。它是 同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js http 模块，在客户端（浏览器）它使用 XMLHttpRequests。

1、怎么用axios？

1.1、先使用axios库，与服务器进行数据通信

• 基于XMLHttpRequest封装、代码简单、月下载量在14亿次

• Vue、React项目中都会用到axios

1.2、再学习XMLHttpRequest对象的使用，了解Ajax底层原理

axios使用

1、引入axios.js：https://cdn,jsdelivr.net/npm/axios/dist/axios.min.js

2、使用axios函数

axios({
	url:'目标资源地址'
}).then((result)=>{
	//数据处理
})

2、认识URL

2.1、什么是URL

URL称为统一资源定位符，俗称网页地址，简称网址，是因特网上标准的资源的地址，用于访问网络资源，如同再网路上的门牌。

2.2、URL的组成

我们根据这个网址对URL进行分析http://hmajax.itheima.net/api/provice

• 协议
  • http协议，是超文本传输协议（hyper text transfer protocol），规定浏览器和服务器之间传输数据的格式
  • https协议
• 域名
  • hmajax.itheima.net，标记服务器在互联网中的方位
• 资源路径
  • /api/province，标记资源在服务器下的具体位置

3、URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

axios({
	url:'http://xxx.com/xxxx/xxx'
  params:{
  参数名1: 值1,
  参数名2: 值2
}
}).then({
	//数据处理
})

4、常用请求方法

请求方法：对服务器资源，要执行的操作

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据(全部)
DELETE	删除数据
PATCH	修改数据(部分)

4.1、axios请求配置

url：请求的URL网址

method：请求的方法，GET可以省略

data：提交数据

axios({
	url: '',
  method: '',
  data:{
    参数:值
  }
}).then((result) => {
  //数据处理
})

4.2、axios错误处理

当我们发起请求时可能会出现一些请求报错，这时候我们需要把请求报错的内容进行反馈给用户，这时候我们就需要进行错误处理，在then方法的后面，通过语法调用catch方法，传入回调函数并定义参数

axios({
	url: '',
  method: '',
  data:{
    参数:值
  }
}).then(result => {
  
}).catch(error => {
  //在这里我们可以对错误信息进行处理
})

5、HTTP协议

5.1、请求报文

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

• 请求报文的格式
  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息
  • 空行：分隔请求头，空行之后就是发送发送服务器的资源
  • 请求体：发送的资源

在我们发起请求报文失败时，我们可以通过查看请求报文的内容，去排查请求内容的错误

5.2、响应报文

响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容

• 响应报文的格式

  • 响应行：协议、HTTP响应状态码、状态信息

  • 响应头：以键值对的格式携带的附加信息

  • 空行：分隔请求头，空行之后就是发送发送服务器的资源

  • 响应体：返回的资源

HTTP响应状态码：用来表明请求是否成功

状态码	说明
1xx	信息
2xx	成功
3xx	重定向消息
4xx	客户端错误
5xx	服务端错误

6、接口文档

用于描述接口的文章，接口是使用Ajax和服务器通讯时，使用的URL，请求方法，以及参数

我们可以去了解这个网站https://apifox.com 在这个网站上我们可以进行Api接口测试

7、form-serialize插件

当我们在面临表单提交内容比较多的时候，我们需要传递的数据如果一个一个的赋值，这样时很费时费力的，这时候我们就可以使用form-serialize插件

//这个插件是从外部导入的，因此我们在使用过程中需要先下载插件的js文件并导入
<script src="./js/form-serialize.js"></script>
<script>
	document.querySelector('.btn').addEventListener('click', () => {
    const form = document.querySelector('.example-form')
    //hash 设置获取数据解构 -true：JS对象；false：查询对象		enmpty	设置是否获取空置 -true：获取空值；false：不获取空值
    const data = serialize(form, { hash: true, empty: true })	//返回的是对象，对象的属性名与input中的name属性一致
    console.log(data)
    const {username, password} = data
  })
</script>

8、图片上传

1、获取图片文件对象

2、使用FormData携带图片文件

const fd = new FormData()
fd.append(参数名， 值)

3、提交到服务器，获取图片url网站使用