1. Promise函数

//使用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的使用

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.为什么会出现跨域？

跨域原因说明	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. 后端解决跨域问题

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController{}

5. 使用Promise分开处理成功和失败

axios({
    url:'https://localhost:8080/user/list',
    method:"get"
})
    .then(resp => console.log('数据获取成功' + resp))
	.catch(err => console.log('数据获取失败' + err))

6. 自定义配置

1. 配置Axios实例

const request = axios.create({
    baseURL:'http://localhost:8080',//主机地址
    timeout:1000,//超时时间 超时之后会有一次默认的重试
    headers:{'token': 'Bearer Token'}//统一token
})

2. 拦截器

1.请求拦截器

//请求拦截器
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)
    }
)