介面呼叫方式
- 原生ajax
- 基于JQuery的ajax
- fetch
- axios
傳統的URL
RestFul形式的URL
Js中常見的異步呼叫
- 定時任務
- ajax
- 事件函式
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請求
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308850.html
標籤：其他
上一篇：HTML基礎(上)