一、axios 入门
1、axios 的作用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官方网站：http://www.axios-js.com
官方文档：http://www.axios-js.com/zh-cn/docs/
2、axios 应用案例
step1：mybatis-plus 中添加后端接口
依赖
1
2
3
4
| <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
|
controller
1
2
3
4
5
6
7
8
9
| @SpringBootApplication
@MapperScan("com.atguigu.mybatisplus.mapper")
public class MybatisPlusApplication {
public static void main(String[] args) {
SpringApplication.run(MybatisPlusApplication.class, args);
}
}
|
启动主类
访问：http://localhost:8080/user/list
创建 index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
method: 'get',
url: 'http://localhost:8080/user/list',
})
.then((response) => {
console.log('获取数据成功', response)
})
.catch((error) => {
console.log('获取数据失败', error)
})
axios
.get('http://localhost:8080/user/list')
.then((response) => {
console.log('获取数据成功1', response)
})
.catch((error) => {
console.log('获取数据失败1', error)
})
</script>
</body>
</html>
|
浏览器访问，出现跨域问题
二、跨域
跨域的本质：是 http 的同源策略的禁止协议，简单来说就是 http 禁止非同源数据的请求传递，来保证网站的安全性。
1、为什么会出现跨域问题？
出于浏览器的同源策略限制。
所谓同源（即指在同一个域）就是两个地址具有相同的协议（protocol）、主机（host）和端口号（port）
以下情况都属于跨域：
http 和 https 也属于跨域。
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：www.jd.com/item 和 www.jd.com/goods
同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。
而我们刚才是从 localhost:5500 端口去访问 localhost:8080 端口，这属于端口不同，跨域了。
2、解决跨域问题
Spring 早就给我们提供了解决方案，我们只需要在对应 controller 上添加一个注解就可以了
我们在 UserController 类上添加跨域标签@CrossOrigin，再进行测试，则测试成功！
1
2
3
4
| @RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
|
控制台查看结果
三、自定义配置
1、配置 axios 实例
可以对 axios 进行配置，简化代码的编写
1
2
3
4
5
6
|
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 1000,
headers: { token: 'hello' },
})
|
2、配置请求参数
这样，远程接口的 url 地址就可以修改成相对路径了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 1000,
headers: {
token: 'hello',
},
})
request({
method: 'get',
url: '/user/list',
})
.then((response) => {
console.log('获取数据成功', response)
})
.catch((error) => {
console.log('获取数据失败', error)
})
request
.get('http://localhost:8080/user/list')
.then((response) => {
console.log('获取数据成功1', response)
})
.catch((error) => {
console.log('获取数据失败1', error)
})
</script>
</body>
</html>
|
四、拦截器
在请求或响应被 then 或 catch 处理前拦截他们。
1、请求拦截器
在发送 axios 请求前，可以拦截请求，对请求做一些处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
request.interceptors.request.use(
function (config) {
console.log('请求拦截')
config.headers.mytoken = 'hello world'
return config
},
function (error) {
return Promise.reject(error)
}
)
|
发送请求时，在请求头中会携带这个 token
2、响应拦截器
在发送完请求，获取到响应后，可以对响应做一些处理，再返回给前端用户
1
2
3
4
5
6
7
8
9
10
11
12
|
request.interceptors.response.use(
function (response) {
return response.data
},
function (error) {
return Promise.reject(error)
}
)
|
