位置: 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)

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

  • oppok9s是5g手机吗(oppok9是5g网络手机吗)

    oppok9s是5g手机吗(oppok9是5g网络手机吗)

  • 粤省事黄码变绿码怎么申诉(粤康码黄码变绿)

    粤省事黄码变绿码怎么申诉(粤康码黄码变绿)

  • vivo NEX 3s的解锁方式包括哪些(vivo nex怎么解锁)

    vivo NEX 3s的解锁方式包括哪些(vivo nex怎么解锁)

  • 华为手环有测血压的吗(华为手环有测血压功能吗)

    华为手环有测血压的吗(华为手环有测血压功能吗)

  • 开热点会不会中病毒(开热点会不会中毒)

    开热点会不会中病毒(开热点会不会中毒)

  • 登录设备管理删除后别人还能登录吗(登录设备管理删除后)

    登录设备管理删除后别人还能登录吗(登录设备管理删除后)

  • 华为荣耀20Pro手机自定义图标怎么弄(华为荣耀20pro手机参数配置)

    华为荣耀20Pro手机自定义图标怎么弄(华为荣耀20pro手机参数配置)

  • 电脑网页打不开怎么回事(电脑网页打不开是什么原因及解决方法)

    电脑网页打不开怎么回事(电脑网页打不开是什么原因及解决方法)

  • 微信收款音箱s1和s2区别(微信收款音箱s1开不了机)

    微信收款音箱s1和s2区别(微信收款音箱s1开不了机)

  • 微店退款的钱在哪里(微店退款的钱退到微信)

    微店退款的钱在哪里(微店退款的钱退到微信)

  • 网线被剪断了怎么办(网线被剪断了怎么办打什么电话)

    网线被剪断了怎么办(网线被剪断了怎么办打什么电话)

  • 手机wifi按钮按了无效(手机wifi按钮按了开不了恢复出厂设置可以用吗)

    手机wifi按钮按了无效(手机wifi按钮按了开不了恢复出厂设置可以用吗)

  • 苹果live photo怎么设置(苹果livephoto怎么关闭)

    苹果live photo怎么设置(苹果livephoto怎么关闭)

  • wifi能看到手机的浏览内容吗(wifi能看到手机软件密码吗)

    wifi能看到手机的浏览内容吗(wifi能看到手机软件密码吗)

  • 为什么来信息没有显示(为什么来信息没有声音苹果)

    为什么来信息没有显示(为什么来信息没有声音苹果)

  • 苹果6s装双卡教程(苹果6怎么装双卡)

    苹果6s装双卡教程(苹果6怎么装双卡)

  • 快手粉丝拉黑怎么恢复(快手粉丝拉黑怎么移出来)

    快手粉丝拉黑怎么恢复(快手粉丝拉黑怎么移出来)

  • 卡贴机是不是不能开热点(卡贴机是不是不能关机)

    卡贴机是不是不能开热点(卡贴机是不是不能关机)

  • 私人影视有没有摄像头(私人影视有没有锁)

    私人影视有没有摄像头(私人影视有没有锁)

  • 苹果xsmax支持双卡吗(苹果xsmax支持双电信吗)

    苹果xsmax支持双卡吗(苹果xsmax支持双电信吗)

  • 猛犸充电 充满了自动断电么(猛犸充电充满会自己停嘛会退款吗)

    猛犸充电 充满了自动断电么(猛犸充电充满会自己停嘛会退款吗)

  • 怎样复制淘宝链接给好友(怎么复制淘宝链接?)

    怎样复制淘宝链接给好友(怎么复制淘宝链接?)

  • python操作微信客户端:WechatPCAPI库实现自动化回复(python 微信)

    python操作微信客户端:WechatPCAPI库实现自动化回复(python 微信)

  • mysql InnoDB的四种锁定范围(mysql ndb innodb)

    mysql InnoDB的四种锁定范围(mysql ndb innodb)

  • 公司代扣代缴个人所得税如何退税
  • 税控盘抄报逾期怎么办
  • 增值税发票抵扣操作流程
  • 资金账簿印花税和营业账簿的区别
  • 永久性差异什么是暂时性差异
  • 用友财务软件怎么设置二级科目
  • 子公司之间资产划拨会计处理
  • 开业费用属于什么费用
  • 管家婆软件记账流程
  • 开票要交印花税吗
  • 融资租赁租入设备
  • 房地产企业成本包括哪些
  • 企业关联方利息支出税前扣除的标准扣除
  • 什么情况下征税
  • 职工与企业解除劳动合同后医保怎么办
  • 员工一次性伤残补助金
  • 加工企业购入辅料记入什么科目?
  • 计提本月应缴纳增值税
  • 电子发票可以认证几次
  • 生育津贴个税汇算清缴可以扣除吗
  • 出让方式取得土地使用权会计处理
  • 用于当年免征的增值税
  • 销售换货怎么做账务处理
  • 房地产停车场属于公共配套设施吗
  • 失控发票的账务处理
  • 不交社保一告一个准罚多少钱
  • 增值税普通发票几个点
  • 从租计征房产税怎么申报
  • 材料暂估入库需要备案吗
  • php 7z
  • php教程 ftp 函数
  • php获取ftp文件目录
  • vitem
  • 出售固定资产申报表收入与损益表收入不一致
  • 事业单位包含哪些
  • 存货损失是指什么
  • 销售产品的运输费属于什么会计科目
  • 小企业会计准则没有以前年度损益调整科目
  • 资产处置损益要写明细账吗
  • nodejs.org
  • pytorch教程
  • discuz去除底部
  • html5 function
  • 怎样合理的运用网络
  • 小企业会计准则和企业会计准则的区别
  • 会计科目在建工程含税吗
  • 企业所得税研发费用如何加计扣除?
  • mac卸载软件在哪里彻底卸载?
  • 银行开户费属于现金流量表的哪一类
  • 食堂的帐怎么做
  • 小微企业的认定由哪个部门负责
  • 折扣如何做账
  • 物业公司预收的物业费怎么做账
  • 扣除员工餐费怎么做分录
  • 物业公司付电业费合法吗
  • 房屋租赁合同印花税谁交
  • 典当行收房产证吗直接可以拿钱吗
  • 应付账款怎么做平
  • 安装sqlserver2008出现无法安装以下功能
  • mysql5.7版本的服务的名字是
  • windowsxp开机启动项在哪里设置
  • linux系统文件压缩命令
  • centos中如何安装软件
  • window系统中用什么命令来跟踪路由
  • linux根文件系统直接解压到硬盘
  • win7怎么给硬盘重新分区
  • 安装与配置linux操作系统
  • 微软股票
  • windows10窗口设置在哪
  • 批处理执行bat文件
  • windows批处理命令教程
  • 批量数据验证
  • 网页过关类游戏
  • jquery 表单
  • jquery自定义表单
  • js中遍历数组的方法
  • 纳税服务的背景是什么
  • 代理业如何缴纳印花税
  • 台湾大学会计硕士
  • 从国外寄电吉他要多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设