数据请求(axios)

news/2024/7/5 2:05:44

首先使用npm安装axios
接着需要使用的组件中引入:
import axios from ‘axios’
最后在methods(){}中使用

GET请求
axios.get(‘/user?ID=12345’)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 功能同上
axios.get(‘/user’, {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 想使用异步/等待吗?将“asycc”关键字添加到外部函数/方法中
async function getUser() {
try {
const response = await axios.get(‘/user?ID=12345’);
console.log(response);
} catch (error) {
console.error(error);
}
}

POST请求
axios.post(‘/user’, {
    firstName: ‘Fred’,
    lastName: ‘Flintstone’
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
完整版:
axios({
url: ‘/user’,
method: ‘post’,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ‘’
for (let it in data) {
ret += encodeURIComponent(it) + ‘=’ + encodeURIComponent(data[it]) + ‘&’
}
return ret
}],
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
})

执行多个并发请求
function getUserAccount() {
  return axios.get(‘/user/12345’);
}
 
function getUserPermissions() {
  return axios.get(‘/user/12345/permissions’);
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

项目中使用:
let json = [],
me = this;
;
json.chinese = this.temp.title
json.english = this.temp.author
json.project = this.currentProject
console.log(json)
axios({
url: ‘http://39.105.105.188:7010/form/{projectName}/addFields’,
method: ‘post’,
data: [
{
“chinese”: json.chinese,
“english”: json.english,
“id”: 0,
“project”: json.project
}
],
headers: {
‘Content-Type’: ‘application/json’, /* json格式数据 */
“Authorization”: 'Bearer ’ + me.$store.state.user.token
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});


http://lihuaxi.xjx100.cn/news/1260128.html

相关文章

chatgpt赋能python:如何将Python打包成PIP

如何将Python打包成PIP Python是一种高级语言,具有易读性、可移植性和可扩展性等优点,被广泛应用于数据分析、Web开发、机器学习和人工智能等领域。而PIP(Python包管理器)则是一种用于安装和管理Python包的工具,使Python开发更为便捷。在本文…

JVM存储模型、值传递和引用传递

JVM存储模型、值传递和引用传递 一、首先根据下图理解一下JVM是什么? — Java程序和操作系统之间的桥梁 二、Java数据存储模型 因为栈区、本地方法栈、程序计数器是线程私有的,每一个线程在运行时会单独去创建这样一个内存,所以说有多少个线…

k8s部署成功后却显示结点一直处于NotReady状态解决方案

直接说结论:原因是服务器的/opt/cni/bin/目录中没有flannel插件,安装flannel 到/opt/cni/bin/目录下即可。具体步骤往下看。 [rootK8SMaster ~]# journalctl -f -u kubelet.service 先看下报错,发现我一直显示NotReady的原因是由于 [faile…

Maven(三):Maven的组成详解

文章目录 坐标和依赖坐标详解依赖配置依赖范围传递性依赖依赖调节可选依赖优化排除依赖归类依赖优化依赖 仓库本地仓库远程仓库仓库镜像常用搜索地址 生命周期与插件三套生命周期clean生命周期default生命周期site生命周期 插件 聚合与继承更加灵活的构建常见问题使用jdk来运行…

【TA100】图形 3.5 Early-z和Z-prepass

一、深度测试:Depth Test 1.回顾深度测试的内容 深度测试位于渲染管线哪个位置 ○ 深度测试位于逐片元操作中、模板测试后、透明度混合前 为什么做深度测试 ● 深度测试可以解决:物体的可见遮挡性问题 ○ 我们可以用一个例子说明 ■ 图的解释&…

TCP和HTTP的区别

概念 TCP(传输控制协议)和HTTP(超文本传输协议)是在计算机网络中起着不同作用的两种协议。 TCP是一种传输层协议,它负责在网络上可靠地传输数据。它提供了数据分割、流量控制、拥塞控制和错误恢复等功能,以确保数据的可靠传输。TCP使用握手和确认机制来建立和维护连接,…

【C++】速成笔记

C环境搭建&#xff1a;Visual Studio下载安装与配置教程 clion下很多命令符需要加“std::”&#xff0c;如cout、cin、endl等。原因是&#xff1a;<iostream>头文件没有namespace std库。 解决方法: 法1、int main内加using namespace std; 法2、cin&#xff0c;cout&am…

shardingsphere第四课shardingsphere-proxy的使用

一、为什么要有服务端分库分表&#xff1f; 配合 ORM 框架使用更友好 当使用 ShardingSphere-JDBC 时,需要在代码中直接编写分库分表的逻辑,如果使用 ORM 框架,会产生冲突。ShardingSphere-Proxy 作为服务端中间件,可以无缝对接 ORM 框架。 对 DBA 更加友好 ShardingSphere-Pr…