位置: IT常识 - 正文

Axios发送请求的方法(axios发送多个请求)

编辑:rootadmin
Axios发送请求的方法 文章目录Axios发送请求的方法发送get请求的两种方式发送post请求的方式发送Axios请求的方式完整代码(Html代码)服务端代码(node.js服务端)VUE在main.js里设置全局axios请求的配置axios请求中添加token,Authorization中添加tokenAxios发送请求的方法发送get请求的两种方式发送get请求: 传参方式一:直接使用 ?拼接在url后面,url?key=value&key=value. . . axios.get("http://localhost/login?username=张三&password=123").then(function (res) { //请求成功执行 console.log(res); }).catch(function (error) { //请求失败执行 console.log(error); }) ----------------------- 传参方式二:使用params字段 axios.get("http://localhost/login", { params: { username: "张三", password: "123" } }).then(res => { //请求成功执行 console.log(res); }).catch(error => { //请求失败执行 console.log(error); })发送post请求的方式发送post请求: 传参方式一:请求数据类型为json类型 参数一:url服务器地址 参数二:data post请求的数据 axios.post("http://localhost/info", { username: "张三", password: "123" }).then(res => { //请求成功执行 console.log(res); }).catch(error => { //请求失败执行 console.log(error); }) ------------------------- 传参方式二:如果服务器不支持json类型的参数,支持urlencoded类型的参数,使用以下方式: axios.post("http://localhost/info", "username=张三&password=123").then(res => { //成功后的回调函数 console.log(res); }).catch(error => { //失败后的回调函数 console.log(error); })发送Axios请求的方式使用axios发送get请求 axios({ method: "GET",//请求方式 url: "http://localhost/login?username=张三&password=123",//路径 }).then(res => { //成功的回调函数 console.log(res); }).catch(error => { //失败的回调函数 console.log(error); }) 使用axios发送post请求 axios({ method: "POST", url: "http://localhost/info", // data:{ // username:"张三", // password:"123" // },//json数据携带格式 data: "username=张三&password=123"//urlencoded类型的数据 }).then(res => { console.log(res); }).catch(error => { console.log(error); })完整代码(Html代码)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title></head><body> <button onclick="getclick()">Get请求</button> <button onclick="postclick()">POST请求</button> <button onclick="axiosclick()">AXIOS请求</button> <script> function getclick() { //发送get请求 //传参方式一:直接使用 ?拼接在url后面,url?key=value&key=value. . . // axios.get("http://localhost/login?username=张三&password=123").then(function (res) { // //请求成功执行 // console.log(res); // }).catch(function (error) { // //请求失败执行 // console.log(error); // }) //----------------------- //传参方式二:使用params字段 axios.get("http://localhost/login", { params: { username: "张三", password: "123" } }).then(res => { //请求成功执行 console.log(res); }).catch(error => { //请求失败执行 console.log(error); }) } //------------------------------------------------------------------------------ function postclick() { //发送post请求 //传参方式一:请求数据类型为json类型 //参数一:url服务器地址 //参数二:data post请求的数据 // axios.post("http://localhost/info", { // username: "张三", // password: "123" // }).then(res => { // //请求成功执行 // console.log(res); // }).catch(error => { // //请求失败执行 // console.log(error); // }) //------------------------- //传参方式二:如果服务器不支持json类型的参数,支持urlencoded类型的参数,使用以下方式: axios.post("http://localhost/info", "username=张三&password=123").then(res => { //成功后的回调函数 console.log(res); }).catch(error => { //失败后的回调函数 console.log(error); }) } //-------------------------------------------------------------------------------- function axiosclick() { //使用axios发送get请求 // axios({ // method: "GET",//请求方式 // url: "http://localhost/login?username=张三&password=123",//路径 // }).then(res => { // //成功的回调函数 // console.log(res); // }).catch(error => { // //失败的回调函数 // console.log(error); // }) //使用axios发送post请求 axios({ method: "POST", url: "http://localhost/info", // data:{ // username:"张三", // password:"123" // },//json数据携带格式 data: "username=张三&password=123"//urlencoded类型的数据 }).then(res => { console.log(res); }).catch(error => { console.log(error); }) } </script></body></html>服务端代码(node.js服务端)// npm install express --save 安装// npm uninstall express --save 卸载//导入express服务器第三方的包const express = require("express")//解决跨域,导入中间件corsconst cors = require("cors")//创建服务器实例const app = express()//注册跨域中间件app.use(cors())//用来解析post请求体中的参数,把post请求的参数解析res.bodyapp.use(express.urlencoded({ extended: false }))app.use(express.json())//登录请求app.get("/login", function (req, res) { console.log("登录请求", req.query); if (req.query.username == "张三" && req.query.password == "123") { res.json({ code: 1, msg: "登陆成功" }) } else { res.json({ code: 0, msg: "账号或密码错误,登陆失败" }) }})//获取个人信息app.post("/info", function (req, res) { console.log("获取个人信息", req.body); if (req.body.username == "张三" && req.body.password == "123") { res.json({ code: 1, msg: "获取成功" }) } else { res.json({ code: 0, msg: "获取失败" }) }})//调用listen启动服务器app.listen(80, function () { console.log("开启了127.0.0.1服务器");})VUE在main.js里设置全局axios请求的配置//下载包npm i axios -S

推荐整理分享Axios发送请求的方法(axios发送多个请求),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:axios请求超时怎么解决,axios发送jsonp请求,axios发送请求的携带参数的方式,axios发送请求的方式,axios发送jsonp请求,axios发送jsonp请求,axios发送请求的方式,axios发送请求的方式,内容如对您有帮助,希望把文章链接给更多的朋友!

Axios发送请求的方法(axios发送多个请求)

在main.js配置如下

import axios from 'axios'//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/booksaxios.default.baseURL='请求根路径'//在vue实例对象的原型上添加这个属性//今后,在每个.vue组件中要发起请求,直接调用this.axios.x××Vue.prototype.axios=axios

在组件中使用

<template><div><button @click="qingqiu">点击按钮发请求</button></div></template>//不在原型中添加axios属性的写法(不推荐,建议看下面这个)/*<script>import axios from 'axios'export dafault {methods:{async qingqiu(){const {data:res}=await axios.get('请求完整地址')console.log(res)}}}</script>*///第二种写法,在原型上添加axios属性,相当于全局配置了axios,全局都能直接使用<script>export dafault {methods:{async qingqiu(){//this指向原型,通过打点调用里面的axios即可const {data:res}=await this.axios.get('请求接口')console.log(res)}}}</script>

把axios挂载到 vue原型上 有个缺点------无法实现API接口的复用 当想要在多个组件发送同样的请求时,每个组件都要写同样的按钮和方法(都要重新调用一下API接口) ,不利于复用

axios请求中添加token,Authorization中添加token

axios请求中添加token,应在header中添加的token,使用Authorization属性字段,如下代码

export function downLoadZip(str, filename) { axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authorization': 'Bearer ' + getToken() } }).then(res => { console.log(res) })}

关键代码:

headers: { 'Authorization': 'Bearer ' + getToken() }
本文链接地址:https://www.jiuchutong.com/zhishi/299812.html 转载请保留说明!

上一篇:GPT-4技术报告(gpt 4927)

下一篇:计算机视觉竞赛技巧总结(二):图像分割基础篇(计算机视觉竞赛很重要吗)

  • 怎样利用原创文章 门户博客和论坛增加外链(怎样撰写原创内容)

    怎样利用原创文章 门户博客和论坛增加外链(怎样撰写原创内容)

  • word箭头流程图怎么做(word2016流程图箭头怎么画)

    word箭头流程图怎么做(word2016流程图箭头怎么画)

  • 80端口被占用了怎么办(80端口被占用了怎么办linux)

    80端口被占用了怎么办(80端口被占用了怎么办linux)

  • 电脑怎么把图片放到 单元格里(电脑怎么把图片变成word文档)

    电脑怎么把图片放到 单元格里(电脑怎么把图片变成word文档)

  • 电气设备ex是什么意思(电气设备外壳ex表示什么标志)

    电气设备ex是什么意思(电气设备外壳ex表示什么标志)

  • 苹果手机还原网络设置会丢东西吗(苹果手机还原网络的密码是什么密码)

    苹果手机还原网络设置会丢东西吗(苹果手机还原网络的密码是什么密码)

  • 苹果耳机只能苹果用吗(苹果耳机只能苹果手机用吗)

    苹果耳机只能苹果用吗(苹果耳机只能苹果手机用吗)

  • 拼多多订阅是什么意思(拼多多里的订阅是什么)

    拼多多订阅是什么意思(拼多多里的订阅是什么)

  • 铅酸电池和锂电池的区别(铅酸电池和锂电池哪个容易爆炸)

    铅酸电池和锂电池的区别(铅酸电池和锂电池哪个容易爆炸)

  • 京东退款京豆退吗(京东商城退货京豆返还吗)

    京东退款京豆退吗(京东商城退货京豆返还吗)

  • 微信英文版不能翻译语音吗(微信英语版本换中文版)

    微信英文版不能翻译语音吗(微信英语版本换中文版)

  • 在相片上画圈圈怎么弄(怎么在相片上画圆圈)

    在相片上画圈圈怎么弄(怎么在相片上画圆圈)

  • 苹果11处理器是几核(苹果11处理器是多少核)

    苹果11处理器是几核(苹果11处理器是多少核)

  • 天猫双十一预售定金能退吗(天猫双十一预售尾款支付时间)

    天猫双十一预售定金能退吗(天猫双十一预售尾款支付时间)

  • 华为p30pro特殊功能(华为p30pro功能键介绍)

    华为p30pro特殊功能(华为p30pro功能键介绍)

  • 个人qq群标签怎么设置(个人qq群标签怎么改名字)

    个人qq群标签怎么设置(个人qq群标签怎么改名字)

  • 红米note8pro有屏幕指纹吗(红米note8pro有屏幕支架吗)

    红米note8pro有屏幕指纹吗(红米note8pro有屏幕支架吗)

  • 小米手环3恢复出厂设置(小米手环3恢复出厂设置后怎么绑定手机)

    小米手环3恢复出厂设置(小米手环3恢复出厂设置后怎么绑定手机)

  • 微信头像换不了是什么原因(微信头像换不了,说由于系统维护换不了怎么办)

    微信头像换不了是什么原因(微信头像换不了,说由于系统维护换不了怎么办)

  • win10触摸板设置(win10触摸板设置只有灵敏度 无法关闭)

    win10触摸板设置(win10触摸板设置只有灵敏度 无法关闭)

  • 怎么在电脑上设置BIOS启动盘?bios设置启动盘图解(怎么在电脑上设置输入法)

    怎么在电脑上设置BIOS启动盘?bios设置启动盘图解(怎么在电脑上设置输入法)

  • Win11如何修改任务栏大小 Win11修改任务栏大小方法(win11如何修改任务栏颜色)

    Win11如何修改任务栏大小 Win11修改任务栏大小方法(win11如何修改任务栏颜色)

  • 圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

    圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

  • 【ROS】OpenCV+ROS 实现人脸识别(Ubantu16.04)(roi opencv)

    【ROS】OpenCV+ROS 实现人脸识别(Ubantu16.04)(roi opencv)

  • 企业所得税广告费30%扣除
  • 一般纳税人注销公司麻烦吗
  • 零税率是指
  • 企业所得税应纳税额
  • 吊车租赁有限公司
  • 申报入库税款怎么分税种发给税管员
  • 营改增增值税优惠政策
  • 购房补贴退契税3个月没到账
  • 预算内往来款
  • 跨期差额扣除的计算开票以及账务处理
  • 商业银行委托贷款期限
  • 水费收取违约金投诉回复
  • 公司垫付员工工资怎么做账
  • 企业所得税逾期申报怎么补报
  • 固定资产的原价包括
  • 支付税收罚款怎么算企业所得税
  • 工会经费计税依据是应发工资还是实发工资
  • 同一地级行政区指什么
  • 公司注销还需要登报吗
  • 公户批量扣费是啥意思
  • 在建工程一次还是多次
  • 参加会议属于什么工作类别
  • 员工奖励专项基金怎么填
  • 联想笔记本bios密码忘记了
  • win11自带一键重装系统
  • 支付临时工工资计入什么科目
  • 什么是递延所得税费用
  • php面向对象是什么意思
  • windows7旗舰版好用吗?
  • 其他应付款余额在借方表示什么意思
  • 太超过了
  • 软件入无形资产金额
  • PHP:sys_getloadavg()的用法_misc函数
  • 应交增值税视频讲解
  • php oci_connect
  • php ajax json
  • php smtp类
  • 图文详解水的画法
  • html入门基础
  • php中定义函数
  • 销售退货和折让是收入吗?吗?
  • 计提坏账准备不会影响应收账款账面价值
  • 一般纳税人季报还是月报
  • python的多线程 吃cpu太厉害
  • 帝国cms界面
  • 月末研发支出会结转至哪个账户
  • 房地产企业土地增值税清算
  • 库存商品毁损的会计分录
  • 金税四期主要监控的内容
  • 应付职工薪酬的含义
  • 哪类企业是可以避税的
  • 权益法转其他权益工具
  • 收回以前年度的应收账款较多能说明什么呢?
  • 收到跨月的费用发票怎么入账
  • 农业生产成本核算方法
  • 工程内部承包合同
  • 房屋装修支出怎么做账
  • 企业会计做账教程
  • 电脑算固定资产哪一类
  • sqlserver 类型
  • 可以按日期排序
  • 在windows七中
  • 如何快速找到注册的软件
  • win7系统更改ip地址
  • linux检测硬盘故障
  • vi编辑器是干什么的
  • linux中遇到的问题
  • PHP 7.0.0 Alpha 2 发布
  • 轨迹球怎么调出来
  • css优化提高性能的方法有哪些
  • CCProgressTimer 进度条动画在cocos2dx+lua中的使用
  • vxlan配置实例详解
  • jquery1.12.4
  • javascript的介绍
  • 有机肥料销售是做什么的
  • 捐赠纳税
  • 处室岗位是什么意思
  • 国税手撕发票图片
  • 教育费附加地方教育费附加税率
  • 福建税务局电子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设