Axios使用方式

ajax是JQUERY封装的XMLHttprequest用来发送http请求

Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道

1.npm使用方式

       vue项目中 npm install axios

2.cdn方式

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3.使用本地文件

        <script src="js/axios.min.js"></script>

axios 带有拦截器功能:分别是请求拦截器   应答拦截器(就是响应拦截器)

第三种方式需要将axios文件下载到本地,下载方式

GITHUB上下载   地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

在 GitHub 仓库页面,点击 "Code" 按钮,然后选择 "Download ZIP" 以下载包含所有文件的压缩文件。

解压下载的 ZIP 文件。

在解压后的文件夹中,你可以在 dist 文件夹中找到 axios.min.js 文件。

解压后点进去dist 文件夹中找到 axios.min.js 文件。

下面用VsCode练习下axios

1.GET无参

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入axios -->

    <script src="js/axios.min.js"></script>

    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

    <button οnclick="fn1()">使用axios发送get请求,无参数</button>

    <script>

       

//get无参请求  axios格式: axios.get(url).then().catch().finally()

        function fn1(){

            var url="http://localhost:8000/api/v1/product/index";

            axios.get(url).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

    </script>

</body>

</html>

这是因为跨域问题

2.GET请求带参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入axios -->

    <script src="js/axios.min.js"></script>

    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

    <button οnclick="fn1()">使用axios发送get请求,无参数</button>

    <button οnclick="fn2()">使用axios发送get请求,带参数</button>

    <script>

        //get无参请求  axios格式: axios.get(url).then().catch().finally()

        function fn1(){

            var url="http://localhost:8000/api/v1/product/list";

            axios.get(url).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

        function fn2(){

            var pType=1;

            var pageNum=1;

            var pageSize=3;

            var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;

            axios.get(url).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

    </script>

</body>

</html>

上面这样是传统传参方式

axios使用配置项目params

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入axios -->

    <script src="js/axios.min.js"></script>

    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

    <button οnclick="fn1()">使用axios发送get请求,无参数</button>

    <button οnclick="fn2()">使用axios发送get请求,带参数</button>

    <button οnclick="fn3()">使用axios发送get请求,带参数,使用axios配置项方式</button>

    <script>

        //get无参请求  axios格式: axios.get(url).then().catch().finally()

        function fn1(){

            var url="http://localhost:8000/api/v1/product/list";

            axios.get(url).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

        function fn2(){

            var pType=1;

            var pageNum=1;

            var pageSize=3;

            var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;

            axios.get(url).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

        function fn3(){

            var pType=1;

            var pageNum=1;

            var pageSize=3;

            var url="http://localhost:8000/api/v1/product/list";

            axios.get(url,{

                params:{

                    pType:pType,

                    pageNum:pageNum,

                    pageSize:pageSize

                }

            }).then(res=>{

                console.log(res)

            }).catch(err=>{

                console.log(err)    

            }).finally(()=>{

                console.log("一定执行的代码")

            })

        }

    </script>

</body>

</html>

params是一个{}对象   

那么也可以

var data={

        xxx:xxx

        yyy:yyy

}

然后里面

params:data 即可

例如

Axios发送POST请求

后端接收可以是单个接收  也可以是实体类

用AXIOS发送Post请求    application/json

后端接收

这个请求会发送预请求    实际上是两个请求

     预请求

AXIOS也可以像ajax那样配置项的方式发送请求

下面两种方式使用POST    PUT   PATCH

这种方式默认Content-Type是application/json

AXIOS的返回值

AXIOS的拦截器

拦截器分两种,分别是

请求拦截器:在发起请求之前执行,可以对请求内容做修改,比如增加参数,设置请求头等等

应答拦截器(相应拦截器):服务器返回结果,AXIOS的then之前先执行,可以对应答内容做处理

请求拦截器写法

axios.interceptors.request.use(function(xxx){     记得return xxx},function(yyy) {如果错误做错误处理});

响应拦截器

AXIOS进行全局默认配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/160545.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【三维几何学习】自制简单的网格可视化软件 — Mesh Visualization

自制简单的网格可视化软件 — Mesh Visualization 引言一、整体框架1.1 三角形网格1.2 界面管理1.3 VTK可视化界面 二、核心源码2.1 三角形网格&#xff1a;TriMesh类2.2 界面Widget_Mesh_Manager2.3 VTK可视化2.4 main 引言 使用PyQt自制简单的网格可视化软件 - 视频展示 本是…

Node.js入门指南(一)

目录 Node.js入门 什么是Node.js Node.js的作用 Node.js安装 Node.js编码注意事项 Buffer(缓冲器&#xff09; 定义 使用 fs模块 概念 文件写入 文件读取 文件移动与重命名 文件删除 文件夹操作 查看资源状态 路径问题 path模块 Node.js入门 什么是Node.js …

2023最新面试题

第一家 自我介绍介绍一下最近一个&#xff08;最熟悉的一个&#xff09;项目 项目几个人在负责 项目实际在用了吗&#xff0c;哪个平台在用啊&#xff08;在哪里上线&#xff09; 你认为你自己做的项目里面哪个比较难做呢&#xff0c;项目里面有什么难点&#xff1f;常用的是V…

安卓隐私指示器学习笔记

最近了解到Google 在Android12上新增了权限指示器&#xff0c;可以在信号栏的右侧显示当前访问录音机和Camera的应用&#xff0c;点击后可以跳转到相应应用的权限界面&#xff0c;消费者可以控制权限的开启和关闭。国内手机厂商最近几年都在增加隐私看板供能&#xff0c;消费者…

java 中汉字转拼音

需要引入的jar <!-- pinyin --><dependency><groupId>com.belerweb</groupId><artifactId>pinyin4j</artifactId><version>2.5.0</version></dependency> 实现工具类 package com.julong.util;import java.util.regex…

编程语言发展史:高级语言的兴起

一、高级语言的定义 高级语言是相对于汇编语言而言的&#xff0c;它是一种更加抽象、更加易于理解和使用的计算机编程语言。高级语言的特点是语法简单、易于学习、易于使用、可读性强、可移植性好等。高级语言的出现极大地提高了程序员的工作效率&#xff0c;同时也使得计算机…

Qt connect()方法Qt::ConnectionType

connect() Qt&#xff0c;绑定信号和槽原型&#xff1a; static QMetaObject::Connection connect(const QObject *sender, const char *signal,const QObject *receiver, const char *member, Qt::ConnectionType Qt::AutoConnection);static QMetaObject::Connection conn…

JSP:Javabean

起初&#xff0c;JavaBean的目的是为了将可以重复使用的代码进行打包&#xff0c;在传统的应用中&#xff0c;JavaBean主要用于实现一些可视化界面&#xff0c;如一个窗体、按钮、文本框等&#xff0c;这样的JavaBean称之可视化的JavaBean。 随着技术的不断发展与项目的需求&am…

防火墙部署模式 -- 镜像流量(旁路模式)

镜像流量&#xff08;旁路模式&#xff09; 如图&#xff0c;与单臂路由模式不同&#xff0c;旁路模式中&#xff0c;PC的流量不会流经防火墙&#xff0c;就算防火墙宕机也不会影他们之间的数据传输。 镜像的原理是交换机把被镜像端口的流量复制一份&#xff0c;发到监听端口&…

寻找二叉树最近公共祖先

二叉树为BST LCR 193. 二叉搜索树的最近公共祖先 1.1 递归 利用BST的性质 p root 或者 q root ,显然根为公共祖先p < root < q 或者 p > root > q,显然p&#xff0c;q分别位于root的一颗子树上&#xff0c;故根为公共祖先max{p,q} < root ,显然 p 和q 均在…

基于单片机声光控智能路灯系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机声光控智能路灯系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的声光控智能路灯系统是一种利用单片机技术实现智能控制的路灯系统。它通过感知环境音量和光照强度…

Axios 请求响应结果的结构

发送请求 this.$axios.get(https://apis.jxcxin.cn/api/title?urlhttps://apis.jxcxin.cn/,{params: {id: 10}}).then(res > {console.log(res)})输出返回结果 confing 请求时的配置对象&#xff0c;如果请求的url&#xff0c;请求的方法&#xff0c;请求的参数&#xff0c…

深入理解Java注解的实现原理以及前世今生

深入理解Java注解的实现原理以及前世今生 小雪初寒&#xff0c;请添衣&#xff0c;冬棋如意&#xff0c;待良人&#xff0c;望归期。 1.Java注解的前世今生 Java注解是一种元数据标记&#xff0c;它提供了一种在Java代码中添加元数据&#xff08;注释&#xff09;的方式。注解…

Linux文件

目录 一、基本概念 二、研究进程和被打开文件的关系 &#xff08;一&#xff09;w方式 &#xff08;二&#xff09;a方式 三、认识系统接口&#xff0c;操作文件 &#xff08;一&#xff09;认识文件描述符 &#xff08;二&#xff09;举例 &#xff08;三&#xff09;…

2023年中国油墨树脂主要环节、产量及市场规模分析[图]

油墨树脂是指用于油墨制造中的一种高分子材料&#xff0c;主要用于改善油墨的粘性、流动性、光泽度和耐磨性等性能。其主要成分为合成树脂&#xff0c;如聚酯、聚酰胺、聚丙烯酸酯等。油墨树脂在油墨制造中的应用非常广泛&#xff0c;可以用于各种类型的油墨&#xff0c;包括印…

github访问不了问题

git clone github上的项目的时候&#xff0c;不是访问不了&#xff0c;就是克隆过程被中断了 最近找到一个代理&#xff0c;从代理那里clone而不是github上 GitHub代理 – 初果编程

python BDD 的相关概念

在Python 语言中进行BDD的规格和测试文件的编写的时候&#xff0c;常常会遇到下面的概念&#xff1a; Fixture : 测试设施。设定测试环境的预设状态或值的机制。Background&#xff1a; 背景。所有场景的公共部分。Scenario&#xff1a; 场景。Given &#xff1a; 前置条件Whe…

centos7 安装node.js,不用wget也不用解压文件

更新系统&#xff1a;首先&#xff0c;更新系统的软件包列表和已安装的软件包。在终端中以root用户或具有sudo权限的用户身份运行以下命令&#xff1a; sudo yum update添加Node.js源&#xff1a;CentOS 7默认的软件仓库中可能不包含最新的Node.js版本。因此&#xff0c;我们需…

[leetcode 数位运算] 2939. 最大异或乘积 M

给你三个整数 a &#xff0c;b 和 n &#xff0c;请你返回 (a XOR x) * (b XOR x) 的 最大值 且 x 需要满足 0 < x < 2n。 由于答案可能会很大&#xff0c;返回它对 109 7 取余 后的结果。 注意&#xff0c;XOR 是按位异或操作。 示例 1&#xff1a; 输入&#xff1…

git中的分支管理:git branch,git checkout,解决git中的分支冲突的方法【Git学习三】

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;Git等软件工具技术的使用 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要…