2024年最全Axios发送请求的方法(3)，字节跳动Andorid岗25k+的面试题_axios如何发送请求

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

##### 完整代码(Html代码)



1
2
3
4
5

Get请求 POST请求 AXIOS请求

//-------------------------
//传参方式二:如果服务器不支持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);
})
}

##### 服务端代码(node.js服务端)



1
2
3
4
5

// 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请求的配置



1
2
3
4
5

//下载包
npm i axios -S

**在main.js配置如下**



1
2
3
4
5

import axios from ‘axios’
//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/books
axios.default.baseURL=‘请求根路径’
//在vue实例对象的原型上添加这个属性
//今后，在每个.vue组件中要发起请求，直接调用this.axios.x××
Vue.prototype.axios=axios

**在组件中使用**



1
2
3
4
5

//不在原型中添加axios属性的写法(不推荐,建议看下面这个)
/*

*/

//第二种写法,在原型上添加axios属性,相当于全局配置了axios,全局都能直接使用

**把axios挂载到 vue原型上 有个缺点------无法实现API接口的复用**  
 **当想要在多个组件发送同样的请求时,每个组件都要写同样的按钮和方法(都要重新调用一下API接口) ,不利于复用**


#### axios请求中添加token，Authorization中添加token




![img](https://img-blog.csdnimg.cn/img_convert/310e73b3292bcc434422e6408679bee0.png)
![img](https://img-blog.csdnimg.cn/img_convert/48ece586eb78f92796c1e88092950034.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

650805107)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29