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函数

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

复制代码

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查询参数

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

1. axios({
2.         url:'http://xxx.com/xxxx/xxx'
3.   params:{
4.   参数名1: 值1,
5.   参数名2: 值2
6. }
7. }).then({
8.         //数据处理
9. })

复制代码

4、常用请求方法

请求方法：对服务器资源，要实行的操纵
请求方法操纵GET获取数据POST提交数据PUT修改数据(全部)DELETE删除数据PATCH修改数据(部分) 4.1、axios请求配置

url：请求的URL网址
method：请求的方法，GET可以省略
data：提交数据

1. axios({
2.         url: '',
3.   method: '',
4.   data:{
5.     参数:值
6.   }
7. }).then((result) => {
8.   //数据处理
9. })

复制代码

4.2、axios错误处置惩罚

当我们发起请求时大概会出现一些请求报错，这时间我们需要把请求报错的内容举行反馈给用户，这时间我们就需要举行错误处置惩罚，在then方法的后面，通过语法调用catch方法，传入回调函数并界说参数

1. axios({
2.         url: '',
3.   method: '',
4.   data:{
5.     参数:值
6.   }
7. }).then(result => {
8.   
9. }).catch(error => {
10.   //在这里我们可以对错误信息进行处理
11. })

复制代码

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插件

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

复制代码

8、图片上传

1、获取图片文件对象
2、使用FormData携带图片文件

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。