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

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

  • 明日方舟注销账号(明日方舟注销账号流程)

    明日方舟注销账号(明日方舟注销账号流程)

  • win10开启流量计费模式(win10流量控制)

    win10开启流量计费模式(win10流量控制)

  • 美团一个差评要多少个好评怎么补回动态(美团一个差评要多少个好评弥补亏损)

    美团一个差评要多少个好评怎么补回动态(美团一个差评要多少个好评弥补亏损)

  • 红米k30怎么关机(红米k30怎么关机恢复出厂设置)

    红米k30怎么关机(红米k30怎么关机恢复出厂设置)

  • iphone10.3.3怎么录屏(苹果10系统怎么录制)

    iphone10.3.3怎么录屏(苹果10系统怎么录制)

  • 怎么解除qq冻结(qq号被永久冻结了怎么解封)

    怎么解除qq冻结(qq号被永久冻结了怎么解封)

  • 苹果wi-fi打不开是哪里问题(苹果wifi打不开是什么原因)

    苹果wi-fi打不开是哪里问题(苹果wifi打不开是什么原因)

  • 9100F睿频设置?(i910900f睿频)

    9100F睿频设置?(i910900f睿频)

  • 苹果x可以换电池的吗(苹果x可以换电容吗)

    苹果x可以换电池的吗(苹果x可以换电容吗)

  • 拍照和扫描有什么区别(拍照扫描有什么用)

    拍照和扫描有什么区别(拍照扫描有什么用)

  • 电脑周边产品有哪些(电脑周边产品有哪些公司)

    电脑周边产品有哪些(电脑周边产品有哪些公司)

  • 苹果11pro64g够吗

    苹果11pro64g够吗

  • 蓝牙耳机一个声音大一个声音小(蓝牙耳机一个声音特别小)

    蓝牙耳机一个声音大一个声音小(蓝牙耳机一个声音特别小)

  • 苹果8的gps有快速开关吗(苹果8 gps在哪里开)

    苹果8的gps有快速开关吗(苹果8 gps在哪里开)

  • 什么叫精确查找(精确查找是什么意思?)

    什么叫精确查找(精确查找是什么意思?)

  • iphone几开始有指纹解锁(iphone几开始没有指纹)

    iphone几开始有指纹解锁(iphone几开始没有指纹)

  • windows7回收站实际上是(windows7回收站实际是)

    windows7回收站实际上是(windows7回收站实际是)

  • 图库里的照片怎么不见了(图库里的照片怎么制作相册)

    图库里的照片怎么不见了(图库里的照片怎么制作相册)

  • 华为平板m6充电多少瓦(华为平板m6充电器型号)

    华为平板m6充电多少瓦(华为平板m6充电器型号)

  • 在word中写字板是一种什么(word写字板功能)

    在word中写字板是一种什么(word写字板功能)

  • 苹果x支持无线充电吗(苹果X支持无线充多少w)

    苹果x支持无线充电吗(苹果X支持无线充多少w)

  • yalal10什么型号手机(yalal10刚出的时候多少钱)

    yalal10什么型号手机(yalal10刚出的时候多少钱)

  • 抖音怎么关闭礼物特效(抖音怎么关闭礼物等级)

    抖音怎么关闭礼物特效(抖音怎么关闭礼物等级)

  • sedsvc是什么程序(mssecsvc是什么进程)

    sedsvc是什么程序(mssecsvc是什么进程)

  • 显卡丐版是什么意思(显卡丐版啥意思)

    显卡丐版是什么意思(显卡丐版啥意思)

  • 西西伯利亚森林中的阳光,俄罗斯拉杜日内市附近 (© Leonid Ikan/Shutterstock)(在西伯利亚森林中是真实故事吗)

    西西伯利亚森林中的阳光,俄罗斯拉杜日内市附近 (© Leonid Ikan/Shutterstock)(在西伯利亚森林中是真实故事吗)

  • 1.启动前端项目(命令行)(1.启动前端项目怎么做)

    1.启动前端项目(命令行)(1.启动前端项目怎么做)

  • 年终双薪究竟该怎么算
  • 税金及附加如何记账
  • 哪些税不用通过应交税费
  • 股东向公司借款超过一年不还
  • 个人劳务费的免税政策
  • 技术转让是指
  • 企业出资怎么填写
  • 销货方跨月开红字发票流程
  • 公司支付佣金给个人合法吗
  • 收到去年所得税汇算清缴退税账务处理
  • 火车票退票手续费扣多少
  • 已抵扣的增值税怎么做账
  • 安保服务费税率几个点怎么算
  • 关于工资薪金的情况说明
  • 罚款费用报销单怎么写
  • 垫付的工程款可以起诉要回吗
  • 收到支票怎么处理
  • 股东利润分配预缴税款
  • 企业季度所得税可以弥补以前年度亏损吗
  • 出口退税挂靠业务如何做帐?
  • 土地 补偿
  • 个体户经营所得核定税率
  • 获取url的参数有哪些方法
  • 偷渡者视频
  • 桌面小工具怎么添加
  • 折扣负数的专用发票怎么开
  • 绿萝可以放卧室吗晚上睡觉对人害吗
  • apache是什么文件
  • 应付职工薪酬资产还是负债
  • thinkphp6验证器
  • php实现留言板功能
  • 小规模纳税人税额怎么算
  • umount -l命令
  • apache 反射工具类
  • 怎样才能帮你
  • 存货报废如何处理方案
  • 受托支付转给个人账户需要交税吗为什么
  • 子公司认定消费税需要披露信息
  • 申报纳税的税务机关
  • 挂预收账款怎么处理
  • 个人写收据要写身份证号吗
  • SQL Server 2008+ Reporting Services (SSRS)使用USER登录问题
  • 个人所得税租房专项扣除标准
  • mysql左连接和右连接语法
  • 招聘招一个人爱我图片
  • 企业计提固定资产折旧以什么假设为前提
  • 承兑汇票找公司贴现违法吗
  • 销售收入怎么入账
  • 有哪些企业项目
  • 收到上年度所得税退税款会计分录怎么写
  • 房地产按揭贷款放款条件
  • 企业贷款业务
  • 兼营即征即退产品 增值税
  • 内退文件2018
  • 所得税多缴纳分录
  • 应付票据与应付账款增长的多的逃税问题
  • 应付账款账户怎么结转
  • 营改增后建筑企业如何正确开具发票
  • 速动资产包括哪些流动资产
  • 如何保证系统异常状态
  • 如何替换图片中的文字
  • freebsd重启命令
  • 双硬盘无法进入bios
  • zzs.exe是病毒吗
  • linux操作系统b
  • 萝卜家园和番茄花园哪个好
  • win7电脑显示屏显示不全怎么调整
  • windows8截图保存在哪里
  • linux命令shell脚本
  • JavaScript splice()方法详解
  • content provider
  • Linux系统安装字体
  • videoleap怎么加音频
  • javascript的
  • 关于翡翠手镯知识
  • python中jsonpath
  • 百望电子发票查询下载
  • 广西地方税务局2017年公务员拟录用
  • 爱普生如何
  • 2020十大经济年度人物揭晓
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设