同步的axios

最新推荐文章于 2024-03-27 16:28:11 发布
最新推荐文章于 2024-03-27 16:28:11 发布
阅读量142 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42454941/article/details/102685208
版权

1.后端代码(express)

let express = require('express');
let app = express();
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS')
    res.setHeader('Access-Control-Allow-Max-Age',5000)
    if(req.method == 'OPTIONS'){
        res.end()//OPTIONS请求不做任何处理
    }
    next();
})
app.get('/getdata1', (req, res) => {
    console.log(req.headers)
    res.end('11')
})
app.get('/getdata2', (req, res) => {
    console.log(req.headers)
    setTimeout(function(){
        res.end('22')
    },2000)
})
app.get('/getdata3', (req, res) => {
    console.log(req.headers)
    res.end('33')
})
app.get('/getdata4', (req, res) => {
    console.log(req.headers)
    res.end('44')
})
app.listen('4000')

2.前端html代码(运行在http://localhost:3000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios</title>
</head>
<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    axios.get('http://localhost:4000/getdata1').then(function(data){
      console.log(data)
        return axios.get('http://localhost:4000/getdata2')
    }).then(function(data1){
      console.log(data1)
      return axios.get('http://localhost:4000/getdata3')
    }).then(function(data2){
      console.log(data2)
      return axios.get('http://localhost:4000/getdata4')
    }).then(function(data3){
      console.log(data3)
      return '请求完毕'
    }).then(function(end){
      console.log(end)
    }).catch(function(err){
      console.log(err)
    }).finally(function(){
      //不管成功或失败都会执行
      console.log('end')
    })
    </script>
</body>
</html>

3.运行结果

baiduren！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axios 技术文档.pdf
08-10
Promise通过提供一个“未来完成事件”的容器来解决这个问题，这个容器里保存了异步操作的结果，并且允许链式调用，让异步代码看起来更像是同步代码。 Promise的基本用法是通过构造函数`Promise`来创建一个Promise...
axios:前后端交互的实现方式
最新发布
06-04
5. 同步与异步交互 前后端交互通常是异步的，Axios 支持异步操作，避免阻塞浏览器。在上述示例中，`then` 和 `catch` 分别处理成功和失败的异步响应。 6. 跨域支持 在开发环境中，前端与后端通常运行在不同的域名...
vue axios同步请求解决方案
08-29
主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下
axios实现同步请求
qq_43750656的博客
07-17 4万+
如何实现ajax请求的同步？ 通过jquery发送，将async属性设置为false，这样就会发送同步请求 在axios中，所有的请求都是异步发送的。所以单独用axios是实现不了同步的，需要结合async与await关键字使用。 var data = {} axios.get("./data1.json") .then(res => data = res.data) console.log(data) 如果我们的代码是这个顺序，则data还是个空对象，是获取不到的。 async 与
【axios】 实现同步调用
piano_diano的博客
04-20 4502
async 与await 配置使用实现同步 methods: { async funA(){ var res = await axios.post('xxx'); console.log('axios执行完毕才打印'); } } 注意：这样的方式只限于使用在axios通信的那一层，如果对axios再包一层函数，然后对这外一层函数使用这样的方式修饰同步，无法实现同步效果 吐槽：这样的话。。那不是跟我等响应数据回来再处理一样么。。 met..
axios 实现同步请求
huazhan321的博客
05-13 1万+
如何利用 axios 实现同步请求呢？ 事实上，axios 不能直接支持同步请求，但是我们可以利用 Promse 的 await 语句来实现同步的，前提是所有调用链条上的方法都必须定义为 async 的方法。 第一步，定义 axios 同步请求方法： 在这里插入代码片 ...
axios 进行同步请求(async+await)
w710537643的博客
03-27 1565
【代码】axios 进行同步请求(async+await)
Axios.js源码文件
05-09
Axios的返回值是一个Promise，这使得我们可以利用ES6的async/await语法，使异步代码看起来更像同步代码，提高了代码的可读性。 10. **错误处理**： Axios在Promise的catch阶段处理错误，包括网络错误、超时、...
express实现跨域+axios带cookie请求
qq_44408123的博客
10-30 464
axios: axios.create({ baseURL: "http://localhost:5000/api",//服务端地址 withCredentials: true }) //或者 axios.get("/test",{ withCredentials:true }) 后端 //在路由之前添加 app.all("*", (req, res, next) => { r...
axios.js或axios.min.js下载
08-21
可以直接将js文件放前后端一起的项目中或项目中引用，避免在线引用的延迟。 适用于基于script标签引入的html页面
vue基础-axios封装/同步请求
weixin_40017062的博客
07-24 7582
vue项目中封装axios
axios同步请求--
热门推荐
liuy_1314的博客
08-05 4万+
一般使用axios进行数据请求就是要使用异步请求，因为项目需求，需要同步请求，所以async+await了解一下: async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用 基本用法就是这样的： methods: { async funA(){ var res = await axios.post...
axios同步请求
q879936814的博客
11-26 3253
axios没法像ajax那样配置一个参数，就可以变成同步请求；需要使用async/await，来实现。 //一般情况下，不加async和await，res必为空，因为axios是异步调用，这样就可以利用他们阻塞代码的特点，让异步变为同步 async function func1(){ let res = ''; await axios({ url:'xxx', method:'xxx', data:'xx' }).then(res=>{ res = true; }).catc
axios同步及异步加载
爱吃rabbit的mq
06-12 2万+
同步 async getfiles() { var result={}; var param = new URLSearchParams() param.append('id', $("#type").val()) var url = "/backstage/fileupload/getFileName.action"; await axios....
axios的同步写法和axios在大型项目中该如何抒写（仅供参考思路）
加菲猫的鳄鱼的博客
06-03 2888
前言：在axios中目前看到直接使用同步的写法，所以我们需要自己来设置axios的同步。
axios如何执行同步----async
yhr0322的博客
10-31 1万+
axios执行同步 **axios:**是一种异步请求的方式 ，通过回调函数的方式在请求中做的更多的是可控的功能， 简单介绍一下axios,有疑问的可以看我的博客里边有axios的详细介绍，以及一些个应用场景！！！ axios从入门到精通精解 https://blog.csdn.net/yhr0322/article/details/101977534 axios同步之async-----a...
axios同步和异步请求数据
yhj198927的博客
03-30 8088
axios默认是异步请求数据的，如果需要同步获取数据的话，需要进行设置。 下面的代码默认异步请求数据： <template> <div> <el-tabs @tab-click="tabEvent"> <el-tab-pane name="tab1">Tab1</el-tab-pane> <el-tab-pane name="tab2">Tab2</el-tab-pane>
vue中axios做同步机制
weixin_42776027的博客
03-01 1万+
参考地址：https://segmentfault.com/q/1010000015962729?utm_source=tag-newest methods: { async funA(){ var res = await axios.post('')//这里的res就是你axios请求回来的结果了 } }...
axios 同步异步
11-04
根据引用所述，目前没有发现axios可以同步请求，只能使用jQuery配置同步请求。因此，axios是异步的。根据引用所述，JS是单线程的，大部分代码都是同步的，但是也有少部分代码是异步编程的，异步的宏任务包括定时器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值