2024年最新Axios发送请求的方法(2)，2024年最新华为 口试 ...

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

既有恰当小白学习的零底子资料，也有恰当3年以上经验的小同伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比力多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码课本、实战项目、大纲路线、讲解视频，而且后续会持续更新
必要这份系统化的资料的朋侪，可以戳这里获取

1.             console.log(error);
2.         })
4.     使用axios发送post请求
5.         axios({
6.             method: "POST",
7.             url: "http://localhost/info",
8.             // data:{
9.             // username:"张三",
10.             // password:"123"
11.             // },//json数据携带格式
12.             data: "username=张三&password=123"//urlencoded类型的数据
13.         }).then(res => {
14.             console.log(res);
15.         }).catch(error => {
16.             console.log(error);
17.         })

复制代码

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

复制代码

Document 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);
})
}

2. ##### 服务端代码(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服务器”);
})

2. #### VUE在main.js里设置全局axios请求的配置

复制代码

//下载包
npm i axios -S

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

复制代码

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

2. **在组件中使用**

复制代码

  //不在原型中添加axios属性的写法(不推荐,发起看下面这个)
/*
*/
//第二种写法,在原型上添加axios属性,相当于全局设置了axios,全局都能直接使用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。