Promise和Axios使用
笔记来源 尚硅谷尚融宝课程
·
1. Promise函数
支持函数异步操作，创建文件
Permise-test.js,在``Terminal控制台使用node ./Permise-test.js` 执行本函数
//使用node的读取文件函数
const fs = require('fs')
//实例化 Promise 对象：
//Promise对象有三个状态：初始化、成功、失败
const p = new Promise((resolve, reject) => {
//调用readFile方法读取磁盘文件：异步操作
fs.readFile('./他.txt', (err, data) => {
//当文件读取失败时，可以获取到err的值
if (err) {
reject(err) //reject将Promise对象的状态设置为失败
}
//当文件读取成功时，可以获取到data的值
resolve(data) //resolve将Promise对象的状态设置为成功
})
})
//调用 promise 对象的方法
//then：当 Promise状态成功时执行
//catch：当 Promise状态失败时执行
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;
/**
* @author eleven
* @date 2022/3/2$ 8:17$
* @apiNote $
*/
@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'}//统一token
})
2. 拦截器
在Axios请求或者响应被then或者catch处理之前拦截处理
1.请求拦截器
在发送axios请求之前，拦截请求，对请求做一些处理
//请求拦截器
request.interceptors.request.use(
function(config){
// 在发送请求之前添加参数，如在请求头添加一个token令牌
config.headers.token = 'Bearer Token'
return config
},
function(error){
//对请求的错误进行处理
return Promise.reject(error)
}
)
2.响应拦截器
响应之前做处理
request.interceptors.response.use(
function(response){
//将response中的data取出来，方便前端操作
return response.data
},
function(error){
return Promise.reject(error)
}
)
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)