3

Vue前后端交互

 2 years ago
source link: https://blog.csdn.net/weixin_45419127/article/details/120238576
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

接口调用方式

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

在这里插入图片描述

传统的URL

在这里插入图片描述

RestFul形式的URL

在这里插入图片描述

Js中常见的异步调用

Promise解决的问题

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

在这里插入图片描述

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>

在这里插入图片描述

Promise的具体用法

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

在这里插入图片描述

<!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>

在这里插入图片描述

Promise处理Ajax请求

在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK