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

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

  • vivo手机长按图片识别功能怎么关闭(vivo手机长按图标快捷功能)

    vivo手机长按图片识别功能怎么关闭(vivo手机长按图标快捷功能)

  • 佳能闪光灯怎么开(佳能闪光灯怎么一直开)

    佳能闪光灯怎么开(佳能闪光灯怎么一直开)

  • 淘菜菜怎么申请自提点(淘菜菜怎么申请价格保护)

    淘菜菜怎么申请自提点(淘菜菜怎么申请价格保护)

  • wps文档怎么做链接(wps文档怎么做成链接)

    wps文档怎么做链接(wps文档怎么做成链接)

  • 键盘锁定按什么键解锁(键盘锁定按什么键恢复)

    键盘锁定按什么键解锁(键盘锁定按什么键恢复)

  • word文档图片怎么编辑(word文档图片怎么居中)

    word文档图片怎么编辑(word文档图片怎么居中)

  • cad输入坐标找不到点怎么办(cad输入坐标怎么无法正常定位)

    cad输入坐标找不到点怎么办(cad输入坐标怎么无法正常定位)

  • 钉钉开悬浮窗老师能看见吗(钉钉开悬浮窗老是直播中断)

    钉钉开悬浮窗老师能看见吗(钉钉开悬浮窗老是直播中断)

  • 如何设置不接听陌生电话(如何设置不接听虚拟电话)

    如何设置不接听陌生电话(如何设置不接听虚拟电话)

  • 直流屏常见故障的解决办法(直流屏常见故障显示放电状态)

    直流屏常见故障的解决办法(直流屏常见故障显示放电状态)

  • 环绕方式上下型怎么设置(word环绕方式上下型怎么设置)

    环绕方式上下型怎么设置(word环绕方式上下型怎么设置)

  • 定时开关机在哪里设置(华为手机的定时开关机在哪)

    定时开关机在哪里设置(华为手机的定时开关机在哪)

  • 抖音和快手有什么区别(抖音和快手有什么区别,普通人该如何选择)

    抖音和快手有什么区别(抖音和快手有什么区别,普通人该如何选择)

  • crrul00是什么型号(crrul00是什么型号华为)

    crrul00是什么型号(crrul00是什么型号华为)

  • 荣耀9后盖开胶啥原因(荣耀9后盖脱胶)

    荣耀9后盖开胶啥原因(荣耀9后盖脱胶)

  • 小米6x未知来源怎么设置(小米手机打开未知来源)

    小米6x未知来源怎么设置(小米手机打开未知来源)

  • vivox9s有互传没(vivox9l互传在哪)

    vivox9s有互传没(vivox9l互传在哪)

  • 货币型基金的特点(货币形基金)

    货币型基金的特点(货币形基金)

  • 复制怎么操作(带基点复制怎么操作)

    复制怎么操作(带基点复制怎么操作)

  • 电池健康beta版什么意思(电池健康beta版 维修)

    电池健康beta版什么意思(电池健康beta版 维修)

  • 新版陌陌阅后即焚在哪(陌陌阅后即焚功能在哪打开)

    新版陌陌阅后即焚在哪(陌陌阅后即焚功能在哪打开)

  • qq大会员和超级会员

    qq大会员和超级会员

  • 使用触控id安装什么意思(使用触控id安装要付费吗?什么意思)

    使用触控id安装什么意思(使用触控id安装要付费吗?什么意思)

  • neo.exe - neo是什么进程 有什么用(neo什么意思翻译成中文)

    neo.exe - neo是什么进程 有什么用(neo什么意思翻译成中文)

  • element-UI组件之日期时间选择器与时间格式转化(element_ui)

    element-UI组件之日期时间选择器与时间格式转化(element_ui)

  • 计提税金会计分录怎么算
  • 耕地占用税是什么税种
  • 城市维护建设税优惠政策
  • 促成自然灾害的原因
  • 教育培训行业是干什么的
  • 资产负债表固定资产清理怎么填
  • 员工旅游费怎么记账
  • 资产处置损益是收入还是费用
  • 专用发票抬头一定要打完整吗
  • 个人出口货物到国外
  • 存在弃置费用的固定资产有哪些
  • 注销时其他应付款余额怎么账务处理
  • 个人开劳务发票要同时交个税吗?
  • 建筑业的合理避税
  • 电脑变成代码打不开怎么办
  • 商品按照售价金额核算法进行日常核算
  • 学校应该缴纳的税
  • 税务机关代开的普通发票上无需加盖收款方的印章
  • 纳税等级信息查询
  • 一般纳税人怎么查询
  • 以前的员工怎么交社保
  • 面对通过网络涌入的大量信息,我们应该学会
  • 剑灵配置要求2020官方
  • u盘装系统系统放哪里
  • 收到一张增值税红冲发票
  • 销售产品出去 怎么做科目
  • PHP:mb_ereg_replace_callback()的用法_mbstring函数
  • php preg_quote
  • 商品购进核算
  • 销售材料计提存入什么
  • 纳税调整项目明细表30行怎么填写
  • javascript js
  • 【深度学习】AI一键换天
  • 缺陷修饰
  • 收到房租怎么做账务处理
  • 一般纳税人两费附加减免规定
  • 中标费用入什么科目
  • 税审报告什么时候出
  • 社会团体不属于财政拨款的对象
  • mongodb用户权限
  • 织梦开发教程
  • 企业发生的广告费应计入
  • 工程开票金额大于结算金额怎么处理
  • 残保金的滞纳金怎么算
  • mysql 随机
  • 进项税额转出结转还是红冲
  • 私人出租房子发圈文案
  • 营改增有什么好处
  • 企业研发支出的核算内容
  • 倒卖承兑汇票被判刑
  • 暂估入库一直没有发票
  • 销售固定资产怎么做账务处理
  • sqlserver 教程
  • freebsd联网
  • xp系统怎么把ie浏览器放到桌面
  • 主板设置uefi模式
  • iphone服务器
  • win10 directx9
  • linux源于
  • linux发布项目
  • win8怎么没有无线网图标不见了
  • win7取消关机命令
  • bootstrap栅格布局
  • cocos2dx游戏案例
  • cocos安装
  • js怎么理解
  • unity onbecameinvisible
  • JavaScript Math.ceil() 函数使用介绍
  • jquery页面跳转的方法
  • 搭建nfs
  • 序列化和反序列化是什么意思
  • 使用权资产
  • 批处理实现语音报警
  • javascript向flash swf文件传递参数值注意细节
  • jquery点击方法
  • 广东增值税电子专用发票
  • 云南省税务申报流程
  • 青岛市高新区是红岛吗
  • 在外地买车在青岛能买吗
  • 苏30参数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设