一篇通俗易懂的axios教程

小方的日常
1,165 阅读7分钟

Ajax的概念

Ajax是“AsynchronousJavaScriptandXML”的缩写。他是指一种创建交互式网页应用的网页开发技术。沟通客户端与服务器，可以在不必刷新整个浏览器的情况下，与服务器进行异步通讯的技术

Ajax的原理

通过XMLHTTPRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。XMLHTTPRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

1.1 Ajax的五种请求方法

image.png

重点掌握前两种，GET用于获取数据，POST用于推送数据。

1.2 axios的GET请求
axios({
      method: '请求的类型',
      url: '请求的URL地址',
      params: {id: 1, bookname: '红楼梦'} // params用于传递参数，可选
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

1.3 URL编码

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理

浏览器内置了 encodeURIComponent() 和 decodeURIComponent() 两个方法，用来实现 URL 的编码和解码处理：

image.png

1.4 Ajax的解构赋值

axios收到的数据，是经过axios封装之后的所以，res是一个对象，最重要的数据为 data 属性，其他属性很少使用，所以可以通过对象解构的方式把最常用的属性解构出来，其他的暂时可以不用理会：

axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3009/api/getbooks'
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})
1.5 Ajax的POST请求

POST请求和GET请求不一样，POST请求一定会伴随着请求参数，因为如果没有参数，我们就不必使用POST请求了，且POST请求的功能就是推送数据:

axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3009/api/addbook',
  data: { bookname: '三体', author: '刘慈欣', publisher: '北京人民出版社' }
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})
1.6 请求报文和响应报文

客户端与服务器通信的过程是基于请求与响应的。其中：

  • 请求报文规定了客户端以什么格式把数据发送给服务器
  • 响应报文规定了服务器以什么格式把数据响应给客户端 注意: http 响应状态码 和 业务状态码是不同的

  1. 所处的位置不同：在响应头的状态行中所包含的状态码，叫做“响应状态码”在响应体的数据中所包含的状态码，叫做“业务状态码”。

  2. 表示的结果不同：响应状态码只能表示这次请求的成功与否（成功地失败了）业务状态码用来表示这次业务处理的成功与否

  3. 通用性不同：响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。业务状态码是后端程序员自定义的，不具有通用性。

1.7 axios 拦截器

image.png

axios 请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
axios 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

如果想要取消拦截器，可以通过使用一个变量来接收设置拦截器时返回的实例，然后使用 eject 来取消拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);

常见的HTTP状态码以及代表的意义

  • 200（OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。
  • 400（BadRequest）：请求格式错误。
  • 1)语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求；
  • 2)请求参数有误。
  • 404（NotFound）：请求失败，请求所希望得到的资源未被在服务器上发现。
  • 500（InternalServerError）：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。
  • 100=>正在初始化（一般是看不到的）
  • 101=>正在切换协议（websocket浏览器提供的）
  • 202=>表示接受301=>永久重定向/永久转移
  • 302=>临时重定向/临时转移（一般用来做服务器负载均衡）304=>本次获取的内容是读取缓存中的数据，会每次去服务器校验
  • 401=>未认证，没有登录网站
  • 403=>禁止访问，没有权限
  • 502=>充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
  • 503=>服务器超负荷（假设一台服务器只能承受10000人，当第10001人访问的时候，如果服务器没有做负载均衡，那么这个人的网络状态码就是503）
  • 505=>服务器不支持请求的HTTP协议的版本，无法完成处理。

Ajax接收到的数据类型有哪些，数据如何处理？

接收到的数据类型
  • String/JSON字符串/二进制数据流
  • JSON字符串反序列化后，转成引用类型使用
  • String直接使用
  • 前端用Blob转换

如何处理数据

字符串转对象

第一种方式：eval（）；

vardata='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’；eval（’（“+data+”）’）;
第二种方式：JSON.parse（）；
vardata='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’；JSON.parse（data）

同源和跨域的概念

同源指的是两个 URL 地址具有相同的协议、主机名、端口号。

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。]

跨域指的是两个 URL 地址的协议、主机名、端口号三者中有一个或多个不同。出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

image.png

2.2跨域配置解决方案

突破浏览器跨域限制有两种方案：JSONP 和 CORS 。

image.png

CORS（服务端技术，暂时不研究）

CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。该技术需要浏览器和服务器同时支持，二者缺一不可： ​ 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10） ​ 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）

CORS 的两个主要优势：支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式和只需要后端开启 CORS 功能即可，前端的代码无须做任何改动

JSONP（需要服务端配合）

JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。在实际开发中很少被使用，在面试中可能会问到 JSONP 的原理。

JSONP 不是真正的 Ajax 技术，在解决跨域问题时： ​ CORS 方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求 ​ JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术

结论：只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！

avatar
文章
阅读
粉丝