经过promise及参数解构封装ajax请求的方法

时间 2021-08-13

标签 html 前端 ajax express json 后端跨域 promise app ide 栏目软件设计繁體版

原文原文链接

本文主要介绍利用 promise和参数解构来封装 ajax请求的方法，文章介绍的很详细，应该对你们的学习和工做有必定的参考价值，有须要的朋友能够参考html

1.前端代码

<!DOCTYPE html>前端

<html>ajax

<head>express

<title>Document</title>跨域

</head>promise

<body>app

<script>ide

/**

* type: get/post

* url: http://localhost:3000 http://localhost:3000/details http://localhost:3000/users

* data: lid=5 / uname=lili&upwd=123456

* dataType: '' / 'json', 若是服务端返回的是json格式字符串，就经过dataType通知ajax函数自动转换为对象

* **/

ajax({

type: 'get',

url: 'http://localhost:3000',

dataType: 'json'

})

// data 不写在解构时值默认为 data: undefined

ajax({

type: 'get',

url: 'http://localhost:3000/details',

data: 'lid=0',

dataType: 'json'

})

ajax({

type: 'post',

url: 'http://localhost:3000/users',

data: 'uname=lili&upwd=123456',

}).then(function(res){

alert(res)

})

// dataType 不写在解构时值默认为 dataType: undefined

function ajax({type, url,data, dataType}){

return new Promise(function(open){

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function(){

if(xhr.readyState === 4 && xhr.status === 200){

if(dataType === 'json'){

var res = JSON.parse(xhr.responseText)

}else{

var res = xhr.responseText

}

console.log(res)

open(res)

}

if(type === 'get' && data !== undefined){

url += `?${data}`

}

xhr.open(type, url, true)

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

if(type === 'get'){

xhr.send( www.babatianlong.com )

}else{

xhr.send(data)

}

})

}

</script>

</body>

</html>

另：ajax实际代码实现以下

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function(){

if(xhr.readyState === 4 && xhr.status === 200){

console.log(xhr.responseText)

}

xhr.open('get', 'http://localhost:3000', true)

xhr.send()

</script>

</body>

</html>

2.后端代码

1) 建立一个后端项目

2) 在routes下建立index.js,users.js，代码以下

// index.js

var express = require('express');

var router = express.Router();

/* GET home page. */

var products = [

{

lid:1,

pname:'笔记本',

price:3400

{

lid:2,

pname:'手机',

price:5400

{

lid:3,

pname:'iPad',

price:6400

}

]

router.get('/', function(req, res, next) {

res.send(products)

});

router.get('/details', function(req, res, next){

var lid = req.query.lid

res.send(products[lid])

})

module.exports = router;

3.末：

为了不跨域，能够在一个项目中同时放置前端代码和后端，使用相同的地址，再次发送 Request接口

这是一篇关于使用 promise和参数解构封装 ajax请求的文章，更多相关可关注脚本之家！