Axios发送请求的方法

这篇具有很好参考价值的文章主要介绍了Axios发送请求的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Axios发送请求的方法

发送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")
//解决跨域,导入中间件cors
const cors = require("cors")
//创建服务器实例
const app = express()
//注册跨域中间件
app.use(cors())
//用来解析post请求体中的参数,把post请求的参数解析res.body
app.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

在main.js配置如下

import axios from 'axios'
//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/books
axios.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)
  })
}

关键代码:文章来源地址https://www.toymoban.com/news/detail-475550.html

headers: { 'Authorization': 'Bearer ' + getToken() }

到了这里,关于Axios发送请求的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • axios 使用FormData格式发送GET请求

    如果你需要使用, FormData 格式,发送 GET请求 将参数拼接到 FormData对象 中, 使用 URLSearchParams 将 FormData对象 转换为 查询参数字符串 ,并将其拼接到URL中, 这样就能 以FormData格式发送GET请求 给服务器 注意: URLSearchParams 是ES6中的内置对象,如果你的项目中使用的是较旧的

    2024年02月11日
    浏览(42)
  • 报错:axios发送的所有请求都是404

    对后台发送数据请求接口,在 Swagger 上是可以请求到的 但是通过 Ajax 发送请求就会报 404 Swagger 上调用如下 项目接口请求如下

    2024年02月10日
    浏览(30)
  • html+Vue+封装axios实现发送请求

    在html中使用Vue和Axios时,可以在HTML中引入Vue库和Axios库,然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中,你可以使用Axios发送HTTP请求来获取数据,并将数据绑定到Vue模板中进行展示。 这段代码在HTML中使用了Vue,使用axios并设置了请求拦截器和响应拦截器。它实现

    2024年02月13日
    浏览(50)
  • 【Ajax】笔记-Axios与函数发送AJAX请求

    1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装; 2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。 ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用

    2024年02月16日
    浏览(43)
  • 前端 axios 通过 get 请求发送 json 数据

    先说结论: axios 不能通过 get 请求发送 json 数据 使用 postman 可以做到通过 get 请求发送 json 数据 但是通过 axios 框架就不行, 主要是因为axios是对ajax的一个封装。他本身不支持get请求在body体传参。 原生和jquery的ajax是支持的。建议跟后端沟通,你把json拼在url后面,后端从url的

    2024年02月11日
    浏览(53)
  • axios同时使用查询参数(query)和请求体参数(body)发送请求

    当使用 axios.post 方法发送请求时,可以同时添加查询参数(query)和请求体参数(body)。具体的方法是将查询参数添加到URL中,并将请求体参数作为 data 属性传递给 axios.post 方法。 代码演示: 下面是一个示例,演示了如何将查询参数和请求体参数同时传递给 axios.post 方法:

    2024年03月11日
    浏览(53)
  • Vue使用axios发送get请求并携带参数

    其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。 之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式 感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式 关于如何使用安装

    2023年04月10日
    浏览(56)
  • 再vue项目中使用axios原生发送post请求

    前言:在大多数项目开发中,都是采用前后端分离架构,在此情况下都采用一些成熟的框架,类似于ruoyi,因为成熟所以前端的请求都进行了各种封装,有时想单独发起一个简单的请求,还有点麻烦,因此记录一下。 因为是前后端分离,当前前端使用的端口是81,后端运行的

    2024年02月14日
    浏览(45)
  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包