IOSaxios - Powered by Discuz! Archiver

丝发表于 2024-7-27 01:05:32

axios

json-server 快速搭建http服务

json-server包快速搭建http服务
https://img-blog.csdnimg.cn/direct/5066715662344ff5a7e4f2beb640d487.png

https://img-blog.csdnimg.cn/direct/060cdf98421c4597a3e80ea4a0973366.png
axios

axios特性

axios界说

axios 就是一个建立在HTTP客户端的Promise对象用于浏览器和nodejs发送Ajax请求
https://img-blog.csdnimg.cn/direct/579b354983924c7394c871f6912a4b3e.png
browser 端发送AJax请求
Nodejs端发送http请求

https://img-blog.csdnimg.cn/direct/7f2ac6a02b4c4fee95bfb4ed9882528e.png
支持PromiseAPI
请求响应拦截器
对请求和响应数据做转换
取消请求
自动将结果转化为JSON数据
做保护拦截跨站攻击

axios安装

https://img-blog.csdnimg.cn/direct/0c9bbe91ffb74d168bc72a9cb1d17e35.png

https://img-blog.csdnimg.cn/direct/6ade72f97e164e7cb0571380adb4edbc.png

npm install axios
npm uninstall axios

axios基础设置

axios常用属性：method url data请求体
get请求：得到post/2 的数据信息

https://img-blog.csdnimg.cn/direct/7671f591cdca409ca148512fabda08bd.png

因为axios返回结果是一个Promise对象所以其后可以跟
.then 指定成功的回调

post发送：上传一份post数据

https://img-blog.csdnimg.cn/direct/eb8eb766f3a4437aaafb631f0be68d28.png
https://img-blog.csdnimg.cn/direct/44429a7d6cab461ab28c9047ea68cbaa.png

put请求：进行数据更新

https://img-blog.csdnimg.cn/direct/dc450870c5654d749ac94e3c3a40bb8b.png
delete：删除数据

https://img-blog.csdnimg.cn/direct/03b370ebc0004c8183223130802dc91b.png
buts.onclick=function(){
         //发送axios put请求
         axios({
            method:'get',
            url:'http://localhost:3000/post/2',

         }).then(response=>{
            console.log(response);
         });
   }
   buts.onclick=function(){
         //发送axios    post请求
         axios({
            method:'post',
            url:'http://localhost:3000/post',
            //设置响应体
            data:{
               'title':"你好中国",
               'author':"赵四"
            }

         }).then(response=>{
            console.log(response);
         });

   }
   buts.onclick=function(){
         //发送axios put请求
         axios({
            method:'put',
            url:'http://localhost:3000/post/2',
            //put修改数据
            data:{

               author:"张三"
            }

         }).then(response=>{
            console.log(response);
         });

   }
   buts.onclick=function(){
         //发送axiosdelete请求
         axios({
            method:'delete',
            url:'http://localhost:3000/post/7c59',

         }).then(response=>{
            console.log(response);
         });

   }
axios其他利用方式（axios常用方法）

https://img-blog.csdnimg.cn/direct/a71958b892e545cdb53f33275a34eb35.png
axios.request()

得到所有批评
https://img-blog.csdnimg.cn/direct/f3d5c368078f407491a98484bdb7f203.png
axios.post()

添加批评
https://img-blog.csdnimg.cn/direct/fd1f9db198844a17aeb6d2903f6ab75c.png
https://img-blog.csdnimg.cn/direct/e0b5dad2a3094da192a38f534365427d.png
axios响应

response

response结果
config 设置对象

https://img-blog.csdnimg.cn/direct/439929b83dab40dbbc4ae8e43b94adbf.png
https://img-blog.csdnimg.cn/direct/2c58070a29094d56a97752c03131e368.png
data        响应体

https://img-blog.csdnimg.cn/direct/5ebe38f53cdd49b9a4249adb1eb9e8ee.png
axios自动将服务器返回结果进行json解析，转成对象，方便对结果进行处理
https://img-blog.csdnimg.cn/direct/d7a1b3f28da94beb9bddd911fb61212c.png

headers 响应头信息

行头空行体
request 原生AJax请求对象

request属性所保存的就是当前AJax发送请求时所创建的AJax请求对象
status 响应状态码

statusText 响应状态字符串

axios请求对象

指axios在调用时所接受的参数对象
请求设置 | Axios中文文档 | Axios中文网 (axios-http.cn)
不但指axios请求对象的参数对象，还包括request post等他们当中都用到config设置对象
{
url:'',
method:'',
baseURL:'',
// `transformRequest` 答应在向服务器发送前，修改请求数据
        // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
        // 数组中末了一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData，或         Stream
        // 你可以修改请求头。
        transformRequest: [function (data, headers) {
        // 对发送的 data 进行恣意转换处理

        return data;
        }],

        // `transformResponse` 在传递给 then/catch 前，答应修改响应数据
        transformResponse: [function (data) {
        // 对吸收的 data 进行恣意转换处理

        return data;
        }],

        //自界说请求头
        headers: {'X-Requested-With': 'XMLHttpRequest'},

        // `params` 是与请求一起发送的 URL 参数
        // 必须是一个简单对象或 URLSearchParams 对象
        params: {
        ID: 12345
        },
        data: {
        firstName: 'Fred'
        },//传递json情势的数据要求请求体为json情势
        data: 'Country=Brasil&City=Belo Horizonte',
//传递URL参数情势要求请求体为URL参数情势
        // `timeout` 指定请求超时的毫秒数。
        // 如果请求时间凌驾 `timeout` 的值，则请求会被停止
        timeout: 1000, // 默认值是 `0` (永不超时)
}

https://img-blog.csdnimg.cn/direct/002e5089a4b74b41845f6e8b4c82086b.png
https://img-blog.csdnimg.cn/direct/21a23ae0a07540b48e49062570b476b8.png
头信息 url参数

axios默认设置

https://img-blog.csdnimg.cn/direct/bfb8b9333cec4d398e78063b1530e71c.png

axios创建实例对象发送ajax请求

https://img-blog.csdnimg.cn/direct/6ddda4a858c845f8a6d4fa5ab30f0a8a.png
https://img-blog.csdnimg.cn/direct/df08dc5fd3c24568b4d07806c7f29c08.png
https://img-blog.csdnimg.cn/direct/d7c45de4b9ad4bd9a0c4056f71a0b676.png

创建axios实例对象利用的优势提供数据服务的服务器不只一个
用axios默认设置设置baseurl只能用于向一个端口发送请求

https://img-blog.csdnimg.cn/direct/c302dc273a51487f990443a2578c5f17.png
此时在发送请求时可以做到逐一对应，想向哪一个端口发送请求，直接调用呢个对象利用方法就行
想给谁发调哪个对象

应用场景：发送请求时逐一对应

拦截器（回调函数）

https://img-blog.csdnimg.cn/direct/f2906a9db2e94a9ba64c1e48248738a6.png
https://img-blog.csdnimg.cn/direct/82f4c2a8da9c44558365f91b7b0de7c5.png

设置拦截器

https://img-blog.csdnimg.cn/direct/62c96f023910467997e820d8938f93d5.png
发送请求

https://img-blog.csdnimg.cn/direct/c9ce4460accd4495a3a6a78d8b038282.png
请求拦截器成功回调=》响应拦截器成功回调=》自界说成功回调

多个拦截器执行次序

https://img-blog.csdnimg.cn/direct/05960b13798b47b0bf966960a596dcdc.png

请求拦截器，后进后执行
响应拦截器，先进先执行

请求拦截器中config设置对象

https://img-blog.csdnimg.cn/direct/49479f4350664c3684dbf2a5e15830b6.png
设置响应拦截器的response
https://img-blog.csdnimg.cn/direct/8f1154f6f64044569aad9c2e45912ab4.png

axios取消请求

https://img-blog.csdnimg.cn/direct/bab2f7ff3df3460d934cf576ab6d0df1.png
https://img-blog.csdnimg.cn/direct/8b5c83ab8c614b1bb4b41622efef7515.png

请求部分的设置

https://img-blog.csdnimg.cn/direct/3f56387da673413cb76af1c86da067e8.png

取消请求的设置
https://img-blog.csdnimg.cn/direct/0054bf998fbc4f5ba0a9336dfba5fe14.png

json-server延时响应

https://img-blog.csdnimg.cn/direct/1ec05483d8124e52811fa0e13cad6bea.png
报错cancle不是函数的，跟是否弃用无关，大概是json-server的 -d 2000没有成功开启，另一种快捷方法是network改成慢3G，在请求完成前点击取消按钮，就不会报这个错了
-d 这个api似乎弃用了

axios连续请求自动将前次未完成的请求取消设置

https://img-blog.csdnimg.cn/direct/10af6110d37e4a8b847525811681f2a2.png

axios源码分析

https://img-blog.csdnimg.cn/direct/67612da427e246bca677751c5fd671e5.png
https://img-blog.csdnimg.cn/direct/05c9a7ccd9ea496ba9b5f37d9eb1d976.pngutils工具函数文件
index.js整个包的入口文件

axios 与 Axios

axios由来

https://img-blog.csdnimg.cn/direct/7d45e23efb0442cfb99f7eb6d3a40031.png
https://img-blog.csdnimg.cn/direct/32fec4a181a7484abd378f18c7f53244.png

模仿axios的制作过程

构造函数

https://img-blog.csdnimg.cn/direct/8f6fb18057764499a4216809d7539903.png
https://img-blog.csdnimg.cn/direct/7ecb0250460844f4b7edff35048aed0b.png

原型添加相关方法

https://img-blog.csdnimg.cn/direct/b139f98031734de3a96d2b3806eba686.png
为什么get等方法可以发送请求，因为该方法内部调用了request方法

声明函数

https://img-blog.csdnimg.cn/direct/6c4b5e9d308e437a96363e0e9c019e67.pnghttps://img-blog.csdnimg.cn/direct/54a46bc0509843d8be753424143d93ce.png

最闭幕果axios既是函数，又是对象

模仿axios发送请求(核心结构)

https://img-blog.csdnimg.cn/direct/aba6ab1ed4f949579628f33d86f822b4.png
https://img-blog.csdnimg.cn/direct/40a924c716ff4ea5b797a885e2fb8f99.png

request函数
https://img-blog.csdnimg.cn/direct/a49a9ed43311498a914d74f682a05137.png
dispatchRequest
https://img-blog.csdnimg.cn/direct/cdd3f6fbaf7e4448ac951feec2eac8e1.png
https://img-blog.csdnimg.cn/direct/3dd91ed4b34a4301b5e31118c8e3b2dc.png
adapter 适配器
https://img-blog.csdnimg.cn/direct/7c096f8091fc4765947a8f9588cdfee0.png

https://img-blog.csdnimg.cn/direct/f857de9b722742de9db5060067d82d68.png

axios
https://img-blog.csdnimg.cn/direct/7d35b890392c4a2b94b436944674f1ab.png
adapter=>   dispatchRequest => request => axios

axios拦截器运行原理

https://img-blog.csdnimg.cn/direct/2273a3d4cd2a44458351a5c15cde8bb0.png

interceptors
https://img-blog.csdnimg.cn/direct/8857ff9aacc64050b858455154d7b95f.png

axios.interceptors.request === new InterceptorManager()
执行use方法时
https://img-blog.csdnimg.cn/direct/a61093fe9c3f4416a4b4e4d55ef7bf91.png
https://img-blog.csdnimg.cn/direct/34e1bd4a3a0f4d1292cf202710e7217c.png
use方法只是保存回调函数，保存到request的hendlers
axios的request请求对hendlers数组进行美满，将请求拦截器回调往前放，响应拦截器回调往后放
最终通过循环的方式以跳板的方式执行

模仿实现axios拦截器

构造函数
https://img-blog.csdnimg.cn/direct/0c43380d7e0b4c639406d616d00eb7ce.png
Axios设置
https://img-blog.csdnimg.cn/direct/7d90428645e045a7a4022b30f68a9fed.png

拦截器管理器构造函数
https://img-blog.csdnimg.cn/direct/d8dff3fb6db24f63b0606112c25916d7.png
创建axios函数
https://img-blog.csdnimg.cn/direct/7912ce378a9c4bb888b7ed7f8df414cb.png

请求执行拦截器回调
https://img-blog.csdnimg.cn/direct/c569268a1d314d248b573c12539d6c9c.png
https://img-blog.csdnimg.cn/direct/5a0046433d9d4d67aefe2f09be47167d.png

用拦截器管理器保存回调
在request中调用拦截器回调函数

axios取消请求工作原理

https://img-blog.csdnimg.cn/direct/8a9d51e5604e4965a1559b5f02da64ed.png
https://img-blog.csdnimg.cn/direct/4f5df50ec6a144e2a7368e19c01c14b3.png

xhr.js文件中
https://img-blog.csdnimg.cn/direct/ae64470964414ed8869a271fa9d30d8a.png
request.abort()AJax取消请求
只要config.cancelToken.promise状态发生改变，就会执行取消请求的下令

在取消请求文件中
https://img-blog.csdnimg.cn/direct/7bf7eabf77e64238aa48677b173d55bf.png运行cancel()

模仿实现axios取消请求

https://img-blog.csdnimg.cn/direct/2dc4ecb074a44198829fac15d1c89563.pnghttps://img-blog.csdnimg.cn/direct/b536b17618f64095b85dddbe2db8e77d.png

https://img-blog.csdnimg.cn/direct/54934db66e6a451c918f60e6ea01621a.png

cancelToken函数
https://img-blog.csdnimg.cn/direct/f46a4cde5cac442d8c0934dbf5d0e3a4.png

cancel 执行=》 resolvePromise执行=》 this.promise状态变为成功

关于取消请求的处理
xhr.abort()的位置
在xhradapter中 xhr变乱绑定下面

https://img-blog.csdnimg.cn/direct/f40ad24605f7448d97db739d7e5724ea.png

原理：cancelToken身上维护了一个属性Promise，将改变该Promise状态的变量暴露到全局
cancel执行内部resolvePromise执行   cancelToken.promise（resolve执行）状态变为成功
发送xhr请求中https://img-blog.csdnimg.cn/direct/3eacc338d84f4f8ab21abb14fa85a036.png Promise.then 中回调执行，xhr.abort 执行

https://img-blog.csdnimg.cn/direct/45f2fe03d21a4ce2974f5576e421782a.png
https://img-blog.csdnimg.cn/direct/21de28ff6db4492e8f404dcdce811833.png
总结

axios与Axios的关系
https://img-blog.csdnimg.cn/direct/d2a8554fc6cc430fbc54820016a8d01c.png

https://img-blog.csdnimg.cn/direct/d5192a0f00a1444ba68d62a17670da29.png
https://img-blog.csdnimg.cn/direct/763f031831b049319bb133e6e04d7b9f.png

整体流程https://img-blog.csdnimg.cn/direct/d39e9381784945d9bd1f77cc1e665ffa.pnghttps://img-blog.csdnimg.cn/direct/d1455b148dad41f695bef73b17210dc0.png

拦截器
https://img-blog.csdnimg.cn/direct/e583f8cf67914a178ee5325309496605.png

        https://img-blog.csdnimg.cn/direct/bfc9669b252344f394b848fcde95468f.png
响应拦截器
https://img-blog.csdnimg.cn/direct/28fde20fc0174c2aa169bcd7c95a55c2.png

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

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

axios