axios教程01-基本使用流程

最新推荐文章于 2024-03-09 19:25:03 发布
最新推荐文章于 2024-03-09 19:25:03 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： Web前端开发 文章标签： js vue axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013263917/article/details/105400484
版权
  • axios官网文档：http://www.axios-js.com/
jQuery与axios对比jQueryaxios
1.ajax技术底层原理XMLHTTPRequestXMLHTTPRequest
2.体积大小大（包含大量dom操作与ajax）小(只有ajax请求)
3.是否支持ES6的Promise不支持（底层使用其他方案模拟实现）支持基于原生Promise封装
4.兼容性好 （兼容性是jQuery的强项）一般(使用了新技术)

1.1-axios基本使用

/*
1.学习目标介绍 ： axios学习
    (1) 了解axios作用  ： 发送ajax请求
    (2) axios发送get请求
    (3) axios发送post请求
2.学习路线
    (1)axios特点 （与jQuery区别）
        * axios优点
            a.体积小，只有发送ajax功能 （jQuery体积大，有一堆的DOM操作方法在vue中用不上）
            b.技术先进：基于Promise技术封装ajax
        * axios缺点
            a.浏览器兼容性不好（技术太先进了）
    (2)axios基本使用
        axios.get().then().catch().then();
        axios.post().then().catch().then();
            a. get()里面写url和参数
            b. 第一个then() 表示成功回调 ,相当于jq里面的success
            c. catch() 表示失败回调
            d. 第二个then() 表示完成回调：无论成功失败都会执行
    (3)axios发送get请求传参
    (4)axios发送post请求传参
*/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn1">基本使用</button>
    <button id="btn2">点我发送get请求</button>
    <button id="btn3">点我发送post请求</button>

    <!-- 导入axios -->
    <script src="./axios.js"></script>
    <script>
        /*
        1.学习目标介绍 ： axios学习
            (1) 了解axios作用  ： 发送ajax请求
            (2) axios发送get请求
            (3) axios发送post请求
        2.学习路线
            (1)axios特点 （与jQuery区别）
                * axios优点
                    a.体积小，只有发送ajax功能 （jQuery体积大，有一堆的DOM操作方法在vue中用不上）
                    b.技术先进：基于Promise技术封装ajax
                * axios缺点
                    a.浏览器兼容性不好（技术太先进了）
            (2)axios基本使用
                axios.get().then().catch().then();
                axios.post().then().catch().then();
                    a. get()里面写url和参数
                    b. 第一个then() 表示成功回调 ,相当于jq里面的success
                    c. catch() 表示失败回调
                    d. 第二个then() 表示完成回调：无论成功失败都会执行
            (3)axios发送get请求传参
            (4)axios发送post请求传参
        */

        //基本使用
        btn1.onclick = function () {
            /* 
            get() : 写url和请求参数
            then(res=>{}) : 成功回调， 相当于以前jq的success
            catch(err=>{}):失败回调，   一般可以省略不写
            then(()=>{}):完成回调，  表示请求完成，无论成功失败都会执行。一般可以省略不写
            */
            axios.get('https://autumnfish.cn/api/joke').then(res => {
                //请求成功
                console.log(res);
            }).catch(err => {
                //请求失败
                console.log(err);
            }).then(() => {
                //请求完成
                console.log('本次请求完成');
            });
        };


        //get请求
        btn2.onclick = function () {
            //get方法第一个参数是url
            //get方法第二个参数是对象类型  { params:{get参数对象}  }
            axios.get('https://autumnfish.cn/api/joke/list', {
                params: {
                    num: 10
                }
            }).then(res => {
                //请求成功
                console.log(res);
            });
        };

        //post请求
        btn3.onclick = function () {
            //post方法第一个参数是url
            //post方法第二个参数是对象类型  { post参数对象  }
            axios.post('http://ttapi.research.itcast.cn/mp/v1_0/authorizations', {
                mobile: '18801185985',
                code: '246810'
            }).then(res => {
                //请求成功
                console.log(res);
            });
        };
    </script>
</body>

</html>
坤小
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios-cookiejar-support:添加对cookie的强力cookie支持
04-28
axios-cookiejar-支持 为添加支持。 安装 $ npm i axios tough-cookie axios-cookiejar-support - 或者 - $ npm i axios tough-cookie @3846masa/axios-cookiejar-support # Same as above 打字稿 如果要与...
vue axios全攻略
weixin_33918357的博客
03-23 4243
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！ 如果您觉得本文对您有帮助，不妨点个赞或关注收...
axios——axios定义和特点、安装、 在vue全局挂载、方法、执行结果、config的axios配置、restFul
ranran0306的博客
07-28 716
axios——axios定义和特点、安装、 在vue全局挂载、方法、执行结果、config的axios配置、restFul
【javascript】axios用法介绍
wecode666
02-22 384
Axios 是一个流行的库，主要用于处理 HTTP 请求和响应。上述示例演示了如何使用 Axios 发起 GET 和 POST 请求，以及如何处理响应和错误。Axios 提供了丰富的功能，可以用于更复杂的场景，如发送带有头部信息、设置请求超时等。： Axios 提供了请求和响应拦截器，可以在请求发送前和响应返回后执行一些操作。Axios 可以在浏览器中使用，并且可以通过 Node.js 运行，这使得它在前端和后端均能被广泛使用。Axios 支持取消请求的功能，这对于需要中断正在进行的请求是非常有用的。
axios的基本使用
qq_56088882的博客
08-03 6343
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 2万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios 使用详解
热门推荐
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
axios的使用
m0_60827885的博客
01-31 2222
这样我们封装的request函数就可以使用了，一般项目中我们都会创建一个文件夹用来放所有的接口，起名为api,在文件夹中创建不同页面的文件，写入不同的接口，首先要引入request。首先，需要在src文件夹下创建一个文件夹，一般取名为utils(是应用程序的简写，小方法）定义好了requst函数，如何去使用呢。引入：import axios from 'axios'一、axios是基于promiss对ajax的一种封装。在下面创建一个文件，取名为request（请求）1.1要使用axios下载引用。
Axios 使用详解
qq_34185872的博客
02-16 3179
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
axios-rate-limit:Axios的速率限制
05-11
正在安装yarn add axios-rate-limit用法import axios from 'axios' ;import rateLimit from 'axios-rate-limit' ;// sets max 2 requests per 1 second, other will be delayed// note maxRPS is a shorthand for ...
axios-mp-adapter:允许在微信小程序中发出请求的Axios适配器
05-02
axios-mp-适配器安装使用npm： npm i axios-mp-adapter --save-dev例子var axios = require ( 'axios' ) ;var mpAdapter = require ( 'axios-mp-adapter' ) ;axios ( { url : 'https://foo.bar' , adapter : ...
axios-case-converter:转换snake_casecamel的Axios变压器拦截器
05-28
axios-case-converter 转换snake_case / camelCase的Axios变压器/拦截器将传出data params对象键转换为snake_case 将传入的data对象键转换为camelCase 将传出的headers对象键转换为Header-Case 将传入的headers对象...
axios-fetch-adapter:提取适用于axios的适配器
05-10
npm install @vespaiach/axios-fetch-adapter 有两种使用方法： 创建一个新的Axios实例并在配置中传递此适配器 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, ...
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
Axios使用详解
m0_70314224的博客
10-08 4063
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
【axios】axios的基本使用
weixin_42672802的博客
10-26 1205
axios的基本使用
HTTP 强缓存和协商缓存
风萧萧兮易水寒
09-25 2168
对于客户端来说，HTTP缓存是web性能优化的重要手段。 优势： 减少了冗余的数据传递，节省宽带流量 减少了服务器的负担，大大提高了网站性能 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。 用户体验好 缺点： 缓存中的数据可能与服务器的数据不一致 消耗内存 浏览器缓存一般是针对静态资源（js/css/img等），我们将缓存分为强缓存和协商缓存，两者的主要区别是...
axios的详细使用
最新发布
精通前端技术，了解后端接口
03-09 795
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它支持Promise API，能拦截请求和响应，转换请求和响应数据，取消请求，自动转换JSON数据，客户端支持防御XSRF等特性。axios作为现代前端开发的HTTP客户端王者，以其易用性、功能丰富和社区支持赢得了广大开发者的青睐。通过本文的介绍，相信你对axios的基本用法和高级特性有了更深入的了解。在未来的前端开发中，不妨尝试使用axios来优化你的HTTP请求处理流程，提升应用的性能和用户体验。
vue3应该使用axios还是vue-axios
05-11
Vue 3和Vue 2一样，都可以使用axios或者vue-axios进行网络请求操作。axios是一个独立的第三方库，而vue-axios是对axios进行了封装，让其可以更好地与Vue框架集成。 如果你只需要进行简单的网络请求，使用axios已经...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值