axios请求原理（Axios发送请求的方法）
导读：Axios发送请求的方法 发送get请求的两种方式 发送get请求: 传参方式一:直接使用 ?拼接在url后面,url?key=value&key=value. . . 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) }) }关键代码：
headers: { Authorization: Bearer + getToken() }
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！