axios笔记（已完结）

最新推荐文章于 2024-03-29 17:19:15 发布
最新推荐文章于 2024-03-29 17:19:15 发布
阅读量514 收藏 7
点赞数
分类专栏： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/camustwo/article/details/118296711
版权

axios笔记

1. HTTP回顾

1.1 请求/响应体内容类型

在这里插入图片描述
在这里插入图片描述

1.2 post请求体参数格式

在这里插入图片描述

1.3 API的分类

在这里插入图片描述

2. json-serve搭建rest接口

2.1 json-server(github上)

step1:
npm install -g json-server

step2
生成db.json

step3
json-server --watch db.json

3. 使用axios请求rest接口

  • step1
    BootCDN, 引入在线axios
  • step2 (get, post)
    在这里插入图片描述
  • step3 (put，delete)
    在这里插入图片描述
    /(ㄒoㄒ)/~~，，是axios.put,写错了我丢
    在这里插入图片描述
    指明删除哪一个

4. XHR（XMLHttpRequest）的理解和使用

4.1 ajax请求与一般的http请求的区别

在这里插入图片描述
ajax只是发送请求，拿到数据，但是不会自动刷新，需要我们写代码去更新

4.2 XML请求的API

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. ajax封装（简单版axios）

axios有以下特点，所以如果自己封装的话，就是自己封装的函数要能够实现以下需求
在这里插入图片描述

5.1 ajax实现简易axios源码

<body>
    <div>
        <button onclick="testGet()">GET请求</button>
        <button onclick="testPost()">POST请求</button>
        <button onclick="testPut()">Put请求</button>
        <button onclick="testDelete()">Delete请求</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.9.0/axios.min.js"></script>
    <script>
        //由于在封装axios的时候，返回的是一个promise，所以可以.then
        //发送GET请求
        function testGet() {
            axios({
                url: 'http://localhost:3000/posts',
                method: 'GET',
                params: {
                    id: 2
                }
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }
        //发送PUT请求：更新数据，幂等
        function testPut() {
            axios({
                url: 'http://localhost:3000/posts/2',
                method: 'put',
                data: {
                    "title": "json-server-put",
                    "author": "xiong-yang-yang"
                }
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }
        //发送Delete请求：删除数据，幂等
        //delete既可以传query参数，也可以传请求体参数
        function testDelete() {
            axios({
                url: 'http://localhost:3000/posts/2',
                method: 'delete',
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }
    </script>
    <script>
        // 自己去配置ajax请求
        function axios({
            url,
            method = 'GET',//默认是GET请求
            params = {},
            data = {}
        }) {
            //返回一个promise对象
            return new Promise((resolve, reject) => {
                // 处理method
                method = method.toUpperCase()
                // 如果发送的是GET请求，请求内容是拼接在url里的
                /* 假设请求体是这个对象(params),需要拼接成 id=1&xxx=abc
                {
                    id:1,
                    xxx:'abc'
                }
                */
                let queryString = ''
                Object.keys(params).forEach((key) => {
                    queryString += `${key}=${params[key]}&`
                })
                if (queryString) {
                    //去掉queryString最后的一个&
                    queryString = queryString.substring(0, queryString.length - 1)
                    //拼接到url上
                    url += '?' + queryString
                }
                // 1.执行异步ajax请求
                // 1.1创建xhr对象
                const request = new XMLHttpRequest()
                // 1.2打开连接(初始化请求，没有请求)
                request.open(method, url, true)//true代表异步请求
                // 1.3发送请求
                if (method === 'GET' || method === 'DELETE') {
                    request.send()
                } else if (method === 'POST' || method === 'PUT') {
                    //告诉服务器请求体的格式是json
                    request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
                    request.send(JSON.stringify(data))//发送json格式请求体参数
                }
                
                //绑定状态改变的监听，这是一个同步的任务，放在异步请求前后都可以
                request.onreadystatechange = function () {
                    //如果请求没有完成，直接结束
                    if (request.readyState !== 4) {
                        return
                    }
                    //如果响应状态码在[200,300)之间代表成功，否者失败
                    const { status, statusText } = request
                    //如果请求成功，调用resolve()
                    if (status >= 200 && status < 300) {
                        //准备结果数据对象response
                        const response = {
                            data: JSON.parse(request.response),
                            status,
                            statusText
                        }
                        resolve(response)
                    } else {
                        reject(new Error('request error status is' + status))
                    }
                }

            })
        }
    </script>

</body>

6. axios

6.1 axios特点

在这里插入图片描述

6.2 axios常用语法

在这里插入图片描述
在这里插入图片描述

  • axios.all(promises)—都成功了才成功

6.3 axios基础使用

<body>
    <div>
        <button onclick="testGet()">GET请求</button>
        <button onclick="testPost()">POST请求</button>
        <button onclick="testPut()">Put请求</button>
        <button onclick="testDelete()">Delete请求</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.9.0/axios.min.js"></script>
    <script>
        //指定默认路径
        axios.defaults.baseURL = 'http://localhost:3000'
        // GET请求
        function testGet() {
            axios({
                url: '/posts',
                params: {
                    id: 3
                }
            }).then((response) => {
                console.log('/posts get', response.data)
            })
        }
        // POST请求
        function testPost() {
            // axios.post('/posts', { "title": "json-post", "author": "xiongyangyang" })
            axios({
                url: '/posts',
                method: 'post',
                data: {
                    title: "json-post-new",
                    author: "xiongyangyang"
                }
            }).then((response) => {
                console.log('/posts post', response.data)
            })
        }
    </script>
</body>

6.4 axios create

6.4.1 为什么用create

在这里插入图片描述

6.5 axios拦截器

代码可以在github上找

  • request interceptor 后添加先执行
  • response interceptor 先添加先执行
    在这里插入图片描述
 		// Add a request interceptor  请求拦截器
        axios.interceptors.request.use(function (config) {
            return config; //有多个请求拦截器时，需要将config return出去，不停的往下传递
        }, function (error) {
            return Promise.reject(error);
        });

        // Add a response interceptor  响应拦截器
        axios.interceptors.response.use(function (response) {
            return response; //不return response的话，response往下传的时候，就变成undefined了，在最后的响应里面，response就变成undefined啦，取不到数据了
        }, function (error) {
            return Promise.reject(error);
        });

6.6 取消请求

6.6.1 取消请求情景一

let cancel // 用于保存取消请求的函数
        function getProduct1() {
            axios({
                url: 'http://localhost:3000',
                cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
                    // 保存取消函数，用于之后可能需要取消当前请求
                    cancel = c;
                })
            }).then(
                response => {
                    cancel = null //请求有结果了，就不需要cancel了
                    console.log('请求1成功了', response.data)
                },
                error => {
                    cancel = null
                    console.log(error.message)
                }
            )
        }

        function cancelReq() {
            //执行取消请求
            if (typeof cancel === 'function') {
                cancel('强制取消请求')
            } else {
                console.log('没有可取消的请求')
            }
        }

6.6.2 取消请求情景二

（发送请求二时，请求一没有请求完，就先取消请求一）
在这里插入图片描述
发送多个请求时，有重复的操作，所以需要使用拦截器进行拦截
在这里插入图片描述

Mo小白
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-axios学习笔记
07-14
前端-axios学习笔记
vue axios全攻略
weixin_33918357的博客
03-23 4414
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！ 如果您觉得本文对您有帮助，不妨点个赞或关注收...
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 2万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios详解
最新发布
猫老板的豆
03-29 1782
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
axios笔记
m0_65994896的博客
09-12 117
细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果，可以解决函数嵌套问题。}).then(result=>{对服务器返回的数据进行后续处理}).catch(error=>{参数名1=值1&参数名2=值2。}).then(result=>{对服务器返回的数据进行后续处理})`}).then(result=>{对服务器返回的数据进行后续处理})`}).then(result=>{对服务器返回的数据进行后续处理})`xhr.open('请求方法', '请求地址')
什么是axios（写给小白的理解笔记）
qq_41162375的博客
09-24 2万+
Axios：针对小白的笔记
详解Vue 2.0封装axios笔记
08-30
本篇文章主要介绍了详解Vue 2.0封装axios笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
17axios踩坑笔记1
08-08
17axios踩坑笔记1
Axios学习笔记之使用方法教程
01-19
所以本文将详细介绍关于Axios使用方法的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： Axios Github 功能特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 ...
axios学习笔记（1）
weixin_63048999的博客
11-30 284
1.什么是axiosAxios 是一个基于网络请求库，作用于和浏览器中。它是的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。实质上返回一个promise对象，常使用ascync和await来操作获取数据await返回的promise对象里面的值使用原生ajax发送get请求例1：使用axios发送get请求2.安装和使用axios3.使用axios发起get请求。
vue基础-axios详解
weixin_40017062的博客
07-19 1万+
Axios是一个基于的 HTTP 库，可以用在浏览器和 node.js 中, 也是 vue 官方推荐使用的 http 库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。
Axios学习笔记
qq_56046292的博客
10-15 194
本文展示了axios的基本使用，以及一点源码实现
Axios笔记
qq_27474555的博客
09-20 493
Axios基于promise网络请求库，作用于node.js和浏览器中（即同一套代码可以运行在node.js和浏览器中)，在服务器中他使用原生node.js http,在浏览器端则使用XMLHttpRequest。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。如果你的环境不支持 ES6 Promise，你可以使用polyfill。在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
什么是Axios ?
weixin_57573088的博客
09-14 1万+
什么是Axios？ Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，xios 和 ajax 的区别 axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装
Axios简介
fj123321666的博客
03-27 4842
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiospromise异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
【axios】axios前端技术详解
东方神剑
07-04 1534
【axios】axios前端技术详解
axios请求webservice
08-30
- *1* *2* *3* [Vue3开发学习笔记:使用axios post请求WebService](https://blog.csdn.net/JustWantToFly/article/details/124161786)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值