程序员开发实例大全宝库

网站首页 > 编程文章 正文

express搭建简易服务器并代码实现axios和 axios二次封装的使用

zazugpt 2024-09-11 11:29:54 编程文章 19 ℃ 0 评论

一 index.js 搭建简易服务器并创建http接口

// 1. 导入express（前提是安装了node和express）
const express = require('express')
// 2. 创建web服务器
const app = express()
/* 通过cors中间件可以解决跨域问题，需要npm i cors */
const cors = require('cors')
/* 通过bodyParser中间件可以解析到req.body，即浏览器端的请求参数npm i body-parser */
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())
app.use(cors())
// 4. 监听客户端的get和post请求，并向客户端响应具体的内容
app.get('/todo', (req, res) => {
console.log(req.query)
const obj = {
name: 'zs',
age: 20
}
// 在路由中使用共享数据
res.send(obj)
})
app.get('/book', (req, res) => {
console.log('1111')
console.log(req.query)
const obj = {
author: '施耐庵',
type: '小说'
}
// 在路由中使用共享数据
res.send(obj)
})
app.post('/sg', (req, res) => {
console.log('body', req.body)
const obj = {
name: 'apple'
}
// 在路由中使用共享数据
res.send(obj)
})
// 3. 启动服务器
app.listen(8263, () => {
console.log('启动了express服务器：http://127.0.0.1:8263')
})

二 axios的使用和axios的二次封装

<!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>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1 onclick="changeText(this)" id="btn">axios去获取数据</h1>
<h1 onclick="changeText1(this)" id="btn">instance1去获取数据</h1>
<script>
// FIRST: 在html页面中使用axios以及请求拦截和响应拦截
axios.defaults.baseURL = 'http://127.0.0.1:8263' // 不封装axios时配置axios的基地址
function changeText(id) {
/* 一 使用axios(congig)调接口 */
// 1. axios(congig)之--->>>get方法
// axios({
// url: '/book',
// method: 'get',
// params: {
// book: '水浒传'
// }
// }).then(res => {
// console.log('res--->>>', res)
// })
// 2. axios(congig)之--->>>post方法
// axios({
// url: '/sg',
// method: 'post',
// data: {
// place: 'china'
// }
// }).then(res => {
// console.log('res--->>>', res)
// })
/* 二 使用axios.get调接口 */
axios.get('/book?bookname=水浒传').then(res => {
console.log('res--->>>book---->>>>', res)
})
/* 三 使用axios.post调接口 */
// axios.post('/sg', { place: 'china'}).then(res => {
// console.log('res---->>>>', res)
// })
}
axios.interceptors.request.use(
config => {
/*
在请求发出之前进行一些操作,比方说将token放到请求头header中
***这时候会将这个token一块放到header中进行http请求***
效果图见/public/token.png
*/
// config.headers.token = '2222'
console.log('axios---->>>config现身')
config.headers.myParam = 'make it'
return config
},
err => {
//Do something with request error
console.log('axios--->>>>err现身')
return Promise.reject(err)
}
)
// SECOND: 在html页面中使用axios二次封装以及请求拦截和响应拦截
// 1. 创建一个新的axios实例
/*
使用axios直接调接口的时候，直接使用axios.interceptors,可以触发请求拦截，给header添加属性
使用axios直接调接口的时候，也可以直接触发响应拦截的函数
使用实例instance调接口的时候，instance.interceptors触发不了请求拦截（没发现怎么能触发？？？），
可以直接在axios实例中定义headers的属性
使用实例调接口的时候，响应拦截也没触发，需要看看什么情况？？？
*/
const instance1 = axios.create({
baseURL: 'http://127.0.0.1:8263', // http请求的基地址
timeout: 3000, // 请求的超时时间
headers: {'X-Custom-Header': 'foobar', 'token': '5555'} // 请求头
})
function changeText1(id) {
// 2. 调用实例，发送请求
// 2.1 实例的post方法
// instance({
// url: '/sg',
// method: 'post',
// data: {name: '窝草'}
// }).then(res => {
// console.log('res--axios--instance--post', res)
// })
// 2.2 实例的get方法
// instance({
// url: '/todo',
// method: 'get',
// params: {name: '哈哈'}
// }).then(res => {
// console.log('res--axios--instance--get', res)
// })
instance1.get('/book').then(res => {
console.log('res--axios--instance--get', res)
})
}
instance1.interceptors.request.use(
config => {
/*
在请求发出之前进行一些操作,比方说将token放到请求头header中
***这时候会将这个token一块放到header中进行http请求***
效果图见/public/token.png
*/
// config.headers.token = '2222'
console.log('instance--->>>>config现身')
config.headers.myParam = 'fuck it'
return config
},
err => {
//Do something with request error
console.log('instance--->>>>err现身')
return Promise.reject(err)
}
)
instance1.interceptors.response.use(
res => {
console.log('res---interceptors', res)
//在这里对返回的数据进行处理
return res;
},
err => {
//Do something with response error
return Promise.reject(err)
})
</script>
<!--
axios学习文档：
一 发送ajax请求
1. axios(config) --get、post、put、delete方法，其中put和post语法类似，参数都是用的data字段
2. axios.get axios.post axios.put axios.delete
二 axios.create(config)
1. 创建axios实例
2. 调用axios实例
-->
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表