• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Vue前后端交互

互联网 diligentman 2小时前 2次浏览

接口调用方式

  • 原生ajax
  • 基于JQuery的ajax
  • fetch
  • axios

Vue前后端交互

传统的URL

Vue前后端交互

RestFul形式的URL

Vue前后端交互

Js中常见的异步调用

  • 定时任务
  • ajax
  • 事件函数

Promise解决的问题

  • 主要解决异步深层嵌套
  • 语法更加简洁

Vue前后端交互

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
    // 处理静态资源
app.use(express.static('public'))
    // 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Headers', 'mytoken');
    next();
});
app.get('/async1', (req, res) => {
    res.send('hello1')
})
app.get('/async2', (req, res) => {
    if (req.query.info == 'hello') {
        res.send('world')
    } else {
        res.send('error')
    }
})

app.get('/adata', (req, res) => {
    res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
    res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/axios-json', (req, res) => {
    res.json({
        uname: 'lisi',
        age: 12
    });
})


app.get('/fdata', (req, res) => {
    res.send('Hello Fetch!')
})
app.get('/books', (req, res) => {
    res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
    res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {
    res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
    res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {
    res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/json', (req, res) => {
    res.json({
        uname: 'lisi',
        age: 13,
        gender: 'male'
    });
})

app.get('/a1', (req, res) => {
    setTimeout(function() {
        res.send('Hello TOM!')
    }, 1000);
})
app.get('/a2', (req, res) => {
    setTimeout(function() {
        res.send('Hello JERRY!')
    }, 2000);
})
app.get('/a3', (req, res) => {
    setTimeout(function() {
        res.send('Hello SPIKE!')
    }, 3000);
})

// 路由
app.get('/data', (req, res) => {
    res.send('Hello World!')
})
app.get('/data1', (req, res) => {
    setTimeout(function() {
        res.send('Hello TOM!')
    }, 1000);
})
app.get('/data2', (req, res) => {
    res.send('Hello JERRY!')
})

// 启动监听
app.listen(3000, () => {
    console.log('running...')
})
<!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">
    <title>异步编程</title>
</head>
<script src="./vue.js"></script>
<script src="./js/jquery.js"></script>

<body>

</body>
<script>
    $.ajax({
        url: "http://localhost:3000/data",
        success: function(data) {
            console.log(data);
            $.ajax({
                url: "http://localhost:3000/data1",
                success: function(data) {
                    console.log(data);
                    $.ajax({
                        url: "http://localhost:3000/data2",
                        success: function(data) {
                            console.log(data);

                        }
                    })
                }
            })
        }
    })
</script>

</html>

Vue前后端交互

Promise的具体用法

  • 实例化Promise对象 构造函数中传递函数 该函数用于处理异步任务
  • resolve与reject两个参数用于处理成功与失败两种情况 并通过p.then获取处理结果

Vue前后端交互

<!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">
    <title>Promise的基本使用</title>
</head>

<body>

</body>
<script>
    // Promise的基本使用
    console.log(typeof Promise);
    console.log(Promise);


    var p = new Promise(function(reslove, reject) {
        //实现异步任务
        setTimeout(function() {
            var flag = false;
            if (flag) {
                //正常情况
                reslove('成功')
            } else {
                //异常情况
                reject('失败')
            }
        }, 100)
    })

    p.then(function(data) {
        console.log(data);
    }, function(err) {
        console.log(err);
    })
</script>

</html>

Vue前后端交互

Promise处理Ajax请求

Vue前后端交互


程序员灯塔
转载请注明原文链接:Vue前后端交互
喜欢 (0)