学习
推荐博客：前端工匠
前端模块化详解(完整版) ***
ES6可以配合使用Nodejs、Babel、webpack
静态项目
未使用前端框架
参考：
CDN 引入 axios 和 qs 及其使用方法
axios的封装、配置及使用
注意：必须要本地开启一个服务器进行访问，比如VSCode的Live Server插件,webstorm自带服务器端口访问，否则浏览器会报错
目录
工程名
- js
- - http.js
- - index.js
- index.html
关键代码
index.html
<!-- 先引入axios,qs 然后引入http.js 再引入该html对应的js文件 顺序不可颠倒 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
<script src="js/http.js" type="module"></script>
<script src="js/video.js" type="module"></script>
js/http.js
/*
请求模版类
封装请求
*/
// 在此文件之前导入qs.js，会在全局作用域下生成一个Qs对象,常用操作：Qs.stringify()，Qs.parse()
// console.log(Qs) //首字母要大写
// 导入axios.js，会在全局作用域下生成一个axios对象
// console.log(axios)
/*
封装axios
*/
const httpService = axios.create({
baseURL: 'http://127.0.0.1:8080',
timeout: 10000,
// headers: {'X-Custom-Header': 'foobar'}
});
/*
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
httpService.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
*/
/*
封装请求
*/
function get(url, params = {
}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(res => {
console.log(res)
resolve(res.data); //res.data 返回数据
}).catch(err => {
console.log(err)
reject(err);
})
})
}
// post请求封装 默认json格式:'Content-Type':'application/json',
// 如果是文件上传，可以修改headers为 headers: { 'Content-Type': 'multipart/form-data' }
function post(url, params = {
}, headers = {
'Content-Type': 'application/json'}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: headers
}).then(res => {
console.log(res)
resolve(res.data);
}).catch(err => {
console.log(err)
reject(err);
})
})
}
//7、将模块暴露
export {
get,
post
}
// 测试类
// function getUserAccount() {
// let params = {id: 123, name: 'jack'};
// return axios.post(
// "http://127.0.0.1:8080/test/demo011",
// params) // post请求axios会自动stringify
// .then(function (response) {
// console.log("请求成功：", response.data); // axios会自动parse
// return Promise.resolve(response.data) // 请求返回的数据
// }).catch(function (error) {
// console.error("请求失败：", error);
// return Promise.reject(error)
// });
// }
//
// export {
// getUserAccount
// }
js/index.js
import {
get, post} from "./http.js"
async function test1() {
let params1 = {
id: 123, name: 'Jack'};
let user_one = await get('/test/demo01', params1);
console.log(user_one)
}
async function test2() {
let params2 = {
id: 456, name: 'Tom'};
let user_two = await post('/test/demo02', params2);
console.log(user_two)
}
test1()
test2()
后端部分代码
@RestController
@RequestMapping("/test")
public class TestController {
@GetMapping("/demo01")
public Result testdemo01(String id,String name){
return Result.ok("成功", new String[]{
id, name});
}
@PostMapping("/demo02")
public Result testdemo02(String id,String name){
return Result.ok("成功", new String[]{
id, name});
}
}