浅谈axios

最新推荐文章于 2024-11-08 16:09:18 发布

shakalaca

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量2.3k

点赞数

分类专栏：前端学习文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/cathyleeq/article/details/123959469

版权

前端学习专栏收录该内容

47 篇文章 8 订阅

订阅专栏

1. 预备知识

1.1 前后台交互的基本过程

前台应用从浏览器向服务器发送HTTP请求(请求报文)。
后台服务器接收到请求，并调度应用处理请求，像浏览器返回HTTP响应(响应报文)
浏览器接收到响应，解析显示响应体。

1.2 HTTP请求报文

一个HTTP请求报文由3个部分组成：请求行、多个请求头、请求体。
例如： GET /index.html HTTP/1.1

请求行：
①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。
②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL。
③是协议名称及版本号。
请求头：
HTTP的报文头，报文头包含若干个属性，一个请求头格式为“属性名:属性值”, 如Host/Cookie/Content-Type头。
服务端据此获取客户端的信息，与缓存相关的规则信息，均包含在header中

请求体：
它将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。

1.3 HTTP响应报文

响应行:
①报文协议及版本；
②响应状态码/对应的文本
多个响应头: 如 Content-Type / Set-Cookie 头
响应体：所要的数据。

1.4 post请求体文本参数格式

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数，参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
    用于json字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}

1.5 常见响应状态码

200	OK                     请求成功。一般用于GET与POST请求
201 Created                已创建。成功请求并创建了新的资源
401 Unauthorized           未授权/请求要求用户的身份认证
404 Not Found              服务器无法根据客户端的请求找到资源
500 Internal Server Error  服务器内部错误，无法完成请求

1.6 不同类型的请求及其作用:

1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经数据
4. DELETE: 删除服务器端数据

2. 什么是axios?

前端最流行的ajax请求库.

文档：http://www.axios-js.com/zh-cn/docs/

2.1 axios的特点

基于promise的封装XHR的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
- 批量发送多个请求

2.2区别ajax请求与一般HTTP请求

ajax请求是一种特别的http请求: 只有通过XHR/fetch发送的是ajax请求, 其它都是一般HTTP请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
    一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

2.3 使用XHR封装一个发ajax请求的通用函数

函数的返回值为promise, 成功的结果为response, 异常的结果为error
能处理多种类型的请求: GET/POST/PUT/DELETE
函数的参数为一个配置对象: url/method/params/data
响应json数据自动解析为了js

3 axios的理解和使用

3.1 axios常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url发get请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get请求
axios.delete(url[, config]): 发delete请求
axios.post(url[, data, config]): 发post请求
axios.put(url[, data, config]): 发put请求

axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法