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

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

  • 企业营销如何借力公众平台(如何借力营销)

    企业营销如何借力公众平台(如何借力营销)

  • 小米9号电动车(小米9)(小米9号电动车价格)

    小米9号电动车(小米9)(小米9号电动车价格)

  • 手机刷及后能恢复原来数据吗(手机刷过机再想恢复)

    手机刷及后能恢复原来数据吗(手机刷过机再想恢复)

  • 手机屏幕黑屏一闪一闪的是怎么回事(手机屏幕黑屏一直闪怎么回事)

    手机屏幕黑屏一闪一闪的是怎么回事(手机屏幕黑屏一直闪怎么回事)

  • 小米10待机耗电快怎么办(小米待机耗电快怎么解决12.5)

    小米10待机耗电快怎么办(小米待机耗电快怎么解决12.5)

  • powerpoint怎么设置背景图片(powerpoint怎么设置背景音乐)

    powerpoint怎么设置背景图片(powerpoint怎么设置背景音乐)

  • 微信的聊天记录可以隐藏只让自己看到吗(微信的聊天记录如何导出来)

    微信的聊天记录可以隐藏只让自己看到吗(微信的聊天记录如何导出来)

  • 蓝牙耳机无线充电怎么用(蓝牙耳机无线充电器)

    蓝牙耳机无线充电怎么用(蓝牙耳机无线充电器)

  • 华为手表watch1防水吗(华为手表有防摔倒功能吗)

    华为手表watch1防水吗(华为手表有防摔倒功能吗)

  • qq不能打卡是怎么回事(为什么qq的打卡显示网页无法打开)

    qq不能打卡是怎么回事(为什么qq的打卡显示网页无法打开)

  • 微信运动需不需要网络(微信运动需不需要开定位)

    微信运动需不需要网络(微信运动需不需要开定位)

  • 红米note8怎么设置手电筒快捷键(红米note8怎么设置指纹解锁)

    红米note8怎么设置手电筒快捷键(红米note8怎么设置指纹解锁)

  • 华为智慧屏是什么意思(华为智慧屏是什么电视)

    华为智慧屏是什么意思(华为智慧屏是什么电视)

  • mt6755相当于高通哪款(mtkmt6755相当于骁龙多少)

    mt6755相当于高通哪款(mtkmt6755相当于骁龙多少)

  • 苹果怎么看充电次数(苹果怎么看充电宝电量)

    苹果怎么看充电次数(苹果怎么看充电宝电量)

  • q9400相当于i几(q9400相当于i5多少)

    q9400相当于i几(q9400相当于i5多少)

  • 打开手机就是新闻资讯怎么删除(手机刚打开就有新闻是怎么回事)

    打开手机就是新闻资讯怎么删除(手机刚打开就有新闻是怎么回事)

  • vivoy93什么时候上的市(vivoy93什么时候上市日期)

    vivoy93什么时候上的市(vivoy93什么时候上市日期)

  • 美团会员有自动续费吗(美团会员自动续费怎么看)

    美团会员有自动续费吗(美团会员自动续费怎么看)

  • 微信已经实名认证为什么收不了红包(微信已经实名认证了为什么还要认证)

    微信已经实名认证为什么收不了红包(微信已经实名认证了为什么还要认证)

  • 苹果x横屏设置在哪儿(iphonex的横屏设置)

    苹果x横屏设置在哪儿(iphonex的横屏设置)

  • 如何设置自动登录(如何设置自动登录账号)

    如何设置自动登录(如何设置自动登录账号)

  • uniapp系列-报错或常见问题处理集锦(uniapp异常处理)

    uniapp系列-报错或常见问题处理集锦(uniapp异常处理)

  • 税务机关代码怎样查询
  • 资源税和增值税销售额不一致
  • 固定资产转让怎么做账
  • 公司换股东需要本人去吗
  • 如何分析成本费用偏高
  • 银行开户登记号在哪看
  • 个体户购买社保和自由人购买社保区别
  • 会计集中核算模式
  • 税收主要分类方法
  • 劳务派遣个人所得税
  • 速动比率和流动比率下降说明什么
  • 开完红字发票后,正数发票如何开具?
  • 成立分公司总公司有什么影响
  • 技术转让所得减去成本吗
  • 网上认证增值税专用发票步骤图解
  • 预缴的企业所得税可以税前扣除吗
  • 发票增值税是多少个点
  • 印花税计算公式例子
  • 车间管理人员工作总结
  • 公司招待客户买的水果怎么入账
  • 房产转让的房产税怎么算
  • 金蝶k3购货发票怎么点击记账
  • 法院执行费怎么收取法律依据
  • 工程服务发票税率3%
  • 加工贸易的方式
  • 降低win10版本
  • 赠与合同任意撤销与法定撤销的区别
  • linux grep显示行数
  • 生产经营所得投资者减除费用季度申报填吗
  • 收到服务费的发票怎么做
  • 摊销房租费如何做账
  • 公司专柜样品如何做
  • 怎么用onekey重装系统
  • PHP:curl_file_create()的用法_cURL函数
  • 其他暂收和应付账款区别
  • 以旧换新的概念
  • 不能运行windows10的设备有哪些
  • 利息年化率怎么算化利率怎么算
  • 混合销售会计处理
  • 云霞下的麦田
  • php中的类
  • 逾期增值税扣税凭证抵扣管理办法
  • 小程序生命周期钩子
  • 银行承兑汇票应由在承兑银行开立存款账户的存款人签发
  • js获取本机ip地址
  • vue3.0用法
  • 租入商铺
  • 企业所得税应纳税额的计算公式
  • 商品流通企业商品验收入库流程
  • 如何禁用笔记本键盘触摸板
  • 织梦面包屑导航最后的分隔符大于号去掉方法
  • 银行询证函快递费计入什么科目
  • 企业所得税汇算清缴会计分录
  • 酒店维修费是计入销售成本吗
  • 公司承担员工的个税怎么做账
  • 增值税纳税申报类型有哪些
  • 初级会计实务重点内容
  • 销项税和进项税计算公式
  • 税务局返还税款账务处理
  • 修理费未收到发票怎么办
  • 集团固定资产管理
  • 废料卖出算哪种收入
  • 领购发票的方式有哪些
  • sql语句的高级用法
  • windows8whql
  • ghost后恢复数据
  • 如何避免升级为查帐征收
  • win8怎么关闭管理员用户
  • cs1.6 linux
  • 谈谈jQuery Ajax用法详解
  • python爬虫正则
  • JavaScript italics方法入门实例(把字符串显示为斜体)
  • 深入理解innodb
  • 广州市税务局机构设置
  • 重庆地方税务局12366
  • 国家税务四川税务总局APP
  • 虚开增值税发票但未抵扣怎样处罚
  • 一般纳税人获得自产自销免税发票怎么处理
  • 地税局网上报税
  • 陕西的发票在哪里领取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设