axios简单介绍

最新推荐文章于 2024-02-21 15:12:50 发布
最新推荐文章于 2024-02-21 15:12:50 发布
阅读量2.2k 收藏 7
点赞数 2
分类专栏： js 文章标签： 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq_1999/article/details/121496910
版权
  • axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。从浏览器中创建XMLHttpRequest，从Node.js创建http请求；

        中文官网：Axios 中文文档 | Axios 中文网

 

 axios GET请求-- 两个参数,（可省略）第二个参数可配置请求和响应参数

1、形式一

        //也可以用url?...的形式向后端发送数据，例如用户id、姓名...
        axios.get('/list?username=james&age=20').then((res)=> {    
            console.log(res);
        });

2、形式二 

        axios.get('/list',{
            params: {
                username : 'james',
                age : 30
            }
        }).then((res)=> {
            console.log(res);
        })

 axios POST请求 -- 三个参数，（可省略）第二个为发送到后端的数据，（可省略）第三个可配置请求和响应参数

1.形式一 -- 当发送的数据是对象，axios会默认处理为JSON数据

        axios.post('/list2',{
            firstname : 'Mike',
            lastname : 'Jordan'
        }).then((res) => {
            console.log(res);
        })

2、形式二 -- 当发送的数据是字符串类型，axios会以 '名称/值'对的方式发送给后端

        axios.post(
            '/list2',
            'firstname=Mike&lastname=Jordan'
        ).then((res) => {
            console.log(res);
        })

配置请求和响应参数（底层写法）

        axios({
            url : '/list',
            mothed : 'GET',
            params : { usrename : 'james'},
            headers : { 'Content-Type' : 'application/json' },
            data : {
                username : 'james',
                age : 30
            }
        }).then().catch();

高级写法，实现与底层写法相同

get请求

//get方法，两个参数,第二个参数可配置请求和响应参数
        axios.get('/list',{
            params : { },
            headers : { }
        }).then().catch();

post方法

//post方法，三个参数，第二个为发送到后端的数据，（无配置，可不写）第三个可配置请求和响应参数
        axios.post('/list2',{
            firstname : 'Mike',
            lastname : 'Jordan'
        },{
            params : {},
            headers : {}
        }).then().catch();

默认配置参数（全局配置），优先级低于直接配置

        axios.default.params = { age : 20 };

        axios.get('/list',{
            params : { age :30 }
        }).then((res)=> {
            console.log(res);
        });

添加请求拦截器和响应拦截器

示例：

<body>
    <button>点击</button>
    <div></div>
 
    <script>
        var button = document.querySelector('button')
        var div = document.querySelector('div')

        button.onclick = function() {
            axios.get('/list').then((res) => {
            console.log(res);
        })}

        // 添加请求拦截器-- 在请求发出前才能有效拦截
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            console.log(111);
            div.innerHTML = 'loading...';
            config.headers.token = 'lin';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            console.log(222);
            div.innerHTML = '';
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            if(error.response.status == 404){
            //经常可以在这里做统一的相应操作，例如某个请求有统一的错误响应
                div.innerHTML = '页面没有找到'
            }
            return Promise.reject(error);
        });
    </script>
</body>

如果你稍后需要移除拦截器，可以这样：

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

总结：

axios拦截器，可以在请求前或响应前做一些统一处理，例如携带请求头信息，添加全局loading，添加全局错误处理等

取消重复请求  -- 使用 cancel token取消请求，根据拦截器例子演示（上例）

1、在后端/router，对应接口设置定时器延迟响应，方便演示

router.get('/list',async (ctx,next) => {
  // console.log(ctx.request.query);

  // 定时器,延迟2秒响应时间
  await new Promise((resolve,reject)=> {
    setTimeout(()=>{
      resolve();
    },2000);
  });

  ctx.body = {
    errcode: 0,
    errmsg: 'ok',
    list: [
      {"username": "James", "age": 36},
      {"username": "Jack", "age": 20},
      {"username": "Mary", "age": 26}
    ]
  }
});

2、前端/html 

<body>
    <button>点击</button>
    <div></div>

    <script>

        var button = document.querySelector('button')
        var div = document.querySelector('div')
        const CancelToken = axios.CancelToken;

        button.onclick = function() {
            axios.get('/list').then((res) => {
            console.log(res);
        })}

        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在请求拦截器中创建实例，以便每次请求未响应前拦截重复请求
            const source = CancelToken.source();
            config.cancelToken = source.token;
            
            console.log(111);
            // 判断是否仍未响应完成
            if(div.innerHTML === 'loading...'){
                source.cancel('取消请求');
            }
            div.innerHTML = 'loading...';
            config.headers.token = 'lin';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log(222);
            div.innerHTML = '';
            return response;
        }, function (error) {
            return Promise.reject(error);
        });
             
    </script>
</body>

 axios.create()创建实例 -- 可以通过创建实例，对不同的请求、响应以及拦截进行设置

        var instance = axios.create();
        var instance2 = axios.create();
        
        //请求拦截器，应该写在请求发出前，才能进行有效拦截
        instance.interceptors.request.use(function (config) {
            console.log('111');
            config.headers.token = '1111';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        instance2.interceptors.request.use(function (config) {
            config.headers.token = '2222';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        instance.get('/list').then((res)=> {
            console.log(res);
        });
        instance2.get('/json').then((res)=> {
            console.log(res);
        });

axios.all()进行并发操作

        var xhr1 = axios.get('/list')
        var xhr2 = axios.get('/json')

        axios.all([xhr1,xhr2]).then((res) => {  //两个实例都满足条件才进行
            console.log(res);   //返回一个数组，包含两个实例的响应结果
        })

        // axios.all([xhr1,xhr2]).then(axios.spread((res1,res2)=>{
        //     console.log(res1);       //响应结果分开返回
        //     console.log(res2);
        // }))

lq_1999
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios实现简单文件上传功能
10-16
主要为大家详细介绍了axios实现简单文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在vue中使用axios发送post请求，参数方式
weixin_46012506的博客
06-18 197
在vue中使用axios发送post请求，参数方式 axios默认的请求发送过去的数据是这个格式 但是后台要求的是 Form Data 格式 所以要对请求的数据做出改变 下面直接给出我的解决方法 首先再项目中下载 qs这个模块 引入这个模块 在你的数据前面加上qs.stringify就可以了，这样你的数据发送的就是 Form Data了 第三个参数按照我那样写会把请求的头转换为 这个格式 有的时候后台会判断 所以最好加上 ...
【汇总笔记】axios的四种请求方式及参数设置
最新发布
Thea12138的博客
02-21 1134
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
vue axios 简单封装以及思考
10-17
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要介绍了vue axios 简单封装以及思考 ,需要的朋友可以参考下
vue.js简单配置axios的方法详解
10-18
axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料，需要的朋友们可以参考借鉴，需要的朋友们下面来一起学习学习吧。
axios简单实现小程序延时loading指示
10-18
主要介绍了axios简单实现小程序延时loading指示，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Axios介绍
归兮的博客
08-16 831
Axios是专注于网络数据请求的库，相比于XMLHttpRequest对象。axios简单易用，相比于jQuery，axios更加轻量化，只专注于网络数据请求引入外部js文件Axios发送请求的语法：其中then中执行成功后的回调函数Axios发送请求的语法：其中then中执行成功后的回调函数小练习node 运行的js后台文件，每次接口调用时都需要在终端使用nide运行js文件以下代码直接c v到js文件中。...
axios简介
liuhua_2323的博客
08-02 520
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 一、特点： 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF 二、使用： 1.npm 安装： npm install ax...
49、axios 简介
sunnnnh的博客
06-10 3479
1、axios Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了
axios发送请求的方式
weixin_45427945的博客
06-17 2056
axios发送请求的方式
Vue3开发学习笔记:使用axios post请求WebService
JustWantToFly的博客
04-14 4420
Vue3中使用axios.post请求获取WebService返回的数据
axios复习重点知识总结
weixin_38552195的博客
02-04 498
该文章记录了我在通过视频学习axios时，重要的知识点总结。该部分内容已经通过代码进行了实践。
axios 之get、post传参请求解析
林中明月间丶
07-31 5346
axios get | post传参方法整理_axios post传参_白瑕的博客-CSDN博客axios post params(post像get一样使用params传参)_axios.post() 的params传参_潇蓝诺依的博客-CSDN博客Axios post 传参的params 与data 的两种形式（根据java后台接口来选择）_axios post params_bug收集的博客-CSDN博客axios介绍 axios是基于Promise的，因此可以使用Promise APIaxios的请求
axios总结
hzg_hou的博客
06-07 1060
拦截器本质上其实就是一些函数，里面有两类拦截器，一个是请求拦截器；一个是响应拦截器。请求拦截器的作用：对请求的内容以及参数做处理和检查。响应拦截器的作用：对响应的内容进行预处理。
axios介绍总结
qq_35876316的博客
05-13 295
什么是 axios？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF 安装 使用 npm: $ npm install axios 使用 bower: $ bower ins...
Axios使用简介
小猪佩奇的博客
09-05 912
    vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。     这篇文章的前提是你已经会搭建vue-cli脚手架创建一个webpack项目，并且能够自己使用JSONSERVER搭建本地的数据接口，如果你还不会这些前提条件，就先到Vue.js使用简介学习搭建...
介绍Axios以及它的优点
05-12
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js平台上的数据请求，它具有以下优点： 1. 支持浏览器和Node.js平台：Axios可以在浏览器和Node.js平台上使用，这意味着您可以在前端和后端使用同一个库来进行数据请求。 2. 支持Promise API：Axios基于Promise设计，因此可以轻松地使用async/await语法进行链式调用和处理响应。 3. 具有强大的拦截器和转换器：Axios可以使用拦截器在请求和响应之间添加中间件，还可以使用转换器在请求和响应之间转换数据格式。 4. 可以取消请求：Axios支持取消请求，这对于用户在发送请求后改变了想法或者因为网络问题导致请求超时等情况非常有用。 5. 支持浏览器的XSRF保护：Axios可以在浏览器中自动为您设置XSRF保护，以防止跨站点请求伪造攻击（Cross-Site Request Forgery，CSRF）。 6. 易于使用和扩展：Axios的API简单易懂，易于使用和扩展，您可以自定义配置和请求头等信息，以适应您的项目需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值