1. Promise函数
支持函数异步操作，创建文件Permise-test.js,在``Terminal控制台使用node ./Permise-test.js` 执行本函数
const fs = require('fs')
const p = new Promise((resolve, reject) => {
fs.readFile('./他.txt', (err, data) => {
if (err) {
reject(err)
}
resolve(data)
})
})
p.then(response => {
console.log(response.toString())
}).catch(error => {
console.log('出错了')
console.error(error)
})
2. Axios的使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官方网站：http://www.axios-js.com
1. 安装
npm install axios
2. 创建前端项目
<!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>
</head>
<body>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
axios({
url:'https://localhost:8080/user/list',
method:"get"
})
</script>
</body>
</html>
3. 创建后端项目
- 添加相关的依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.3.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.16</version>
</dependency>
</dependencies>
- 添加User实体类
package net.lesscoding.entity;
import lombok.Data;
import lombok.experimental.Accessors;
/**
* @author eleven
* @date 2022/3/2$ 8:18$
* @apiNote $
*/
@Data
@Accessors(chain = true)
public class User {
private Long id;
private String name;
private Integer age;
private String gender;
}
- 创建控制器
package net.lesscoding.controller;
import net.lesscoding.entity.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Collections;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@GetMapping("/list")
public List<User> getUserList(){
User user = new User();
user.setId(1L).setName("zhangsan").setAge(18).setGender("男");
return Collections.singletonList(user);
}
}
- 启动项目，并使用Axios访问
4. 跨域
1.为什么会出现跨域？
处于浏览器的同源策略限制。所谓的同源（即指在同一个域）就是两个地址具有相同的协议（protocol）主机（host）和端口号（port）
| 跨域原因说明 | url1 | url2 |
|---|
| 域名不同 | www.jd.com | www.taobao.com | | 域名相同，端口不同 | www.jd.com:8080 | www.jd.com:8081 | | 二级域名不同 | item.jd.com | miaosha.jd.com | | 协议不同 | http://www.jd.com | https://www.jd.com |
2. 后端解决跨域问题
Spring框架提供了解决方案，只需要在对应的Controller添加相应的注解即可
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController{}
5. 使用Promise分开处理成功和失败
因为Axios集成了Promise，所以可以直接进行使用
axios({
url:'https://localhost:8080/user/list',
method:"get"
})
.then(resp => console.log('数据获取成功' + resp))
.catch(err => console.log('数据获取失败' + err))
6. 自定义配置
1. 配置Axios实例
对Axios进行配置，简化代码的编写
const request = axios.create({
baseURL:'http://localhost:8080',
timeout:1000,
headers:{'token': 'Bearer Token'}
})
2. 拦截器
在Axios请求或者响应被then或者catch处理之前拦截处理
1.请求拦截器
在发送axios请求之前，拦截请求，对请求做一些处理
request.interceptors.request.use(
function(config){
config.headers.token = 'Bearer Token'
return config
},
function(error){
return Promise.reject(error)
}
)
2.响应拦截器
响应之前做处理
request.interceptors.response.use(
function(response){
return response.data
},
function(error){
return Promise.reject(error)
}
)
|