axios介绍和使用

1. Axios是什么

Axios框架全称（ajax – I/O – system）

Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。

Axios提供了一个简单而直观的API，使得在前端应用程序中进行HTTP通信变得更加容易。它可以与现代前端框架（如React、Vue.js和Angular）以及后端服务器（如Node.js）配合使用。

使用Axios可以发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等。可以设置请求头、请求参数、超时时间，并且还可以通过拦截器在请求发送之前或响应返回之后对请求和响应进行处理。

一句话概括：Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境，简化了前端应用程序中与服务器进行HTTP通信的过程。

Promise不了解的可以看这个：Promise介绍和使用

2. Axios安装和使用

2.1. 使用npm安装

 npm install axios
1

2.2. Axios使用

在组件中引入axios并使用

<template>
  <div class="hello">
    <button @click="get">GET请求</button>
  </div>
</template>

<script>

import axios from "axios"

export default {
  methods: {
    get(){
      axios.get('/user').then(res=>{
        console.log(res.data);
      })
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. Axios请求方式

3.1. axios中常用请求方法

get：获取数据

post：向指定资源提交数据（例如表单提交或文件上传）

put：更新数据（所有数据推送到服务端）

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

3.1.1. get方法

3.1.1.1. 方式1

不带参数

axios
  .get("/user")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });
1
2
3
4
5
6
7
8

带参数

axios
  .get("/user", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });
1
2
3
4
5
6
7
8
9
10
11
12

3.1.1.2. 方式2

不带参数

axios({
  method:'get',
  url:'/user'
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6

带参数

axios({
  method: "get",
  url: "/user",
  params:{
    id:12
  }
}).then(res => {
  console.log(res);
});
1
2
3
4
5
6
7
8
9

GET请求参数会在URL中展示出来，效果如下

URL：http://localhost:8080/user?id=1

3.1.2. post方法

常用的两种post请求类型

1. application/json 一般是用于 ajax 异步请求
2. form-data 表单提交，图片上传、文件上传

3.1.2.1. application/json

使用json格式请求，平时最常用

请求头中Content-Type: application/json;charset=UTF-8

方式1

let data = {
  id: 1
};
axios.post("/user", data).then(res=>{
  console.log(res, 'post')
});
1
2
3
4
5
6

方式2

let data = {
  id: 1
};
axios({
  method:'post',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9
10

3.1.2.2. form-data

请求头中Content-Type: multipart/form-data

let data = {
  id: 1
};
let formData = new FormData();
for(let key in data){
  formData.append(key,data[key])
}
console.log(formData)
axios.post('/user',formData).then(res=>{
  console.log(res,'formData')
})
1
2
3
4
5
6
7
8
9
10
11

3.1.3. put方法

3.1.3.1. 方式1

let data = {
  id: 1
};
axios.put("/user", data).then(res=>{
  console.log(res, 'put')
});
1
2
3
4
5
6

3.1.3.2. 方式2

let data = {
  id: 1
};
axios({
  method:'put',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9
10

3.1.4. patch方法

3.1.4.1. 方式1

let data = {
  id: 1
};
axios.patch("/user", data).then(res=>{
  console.log(res, 'patch')
});
1
2
3
4
5
6

3.1.4.2. 方式2

let data = {
  id: 1
};
axios({
  method:'patch',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9
10

3.1.5. delete方法

3.1.5.1. 方式1：params

params方式会将请求参数拼接在url上面

http://localhost:8080/user?id=1

axios
  .delete("/user", {
    params: {
      id: 1
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
let params = {
  id: 1
};
axios({
  method:'delete',
  url:'/user',
  params:params
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.1.5.2. 方式二：data

data请求参数是直接放置在请求体中的，url上不会展示

axios
  .delete("/user", {
    data: {
      id: 1
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
let data = {
  id: 1
};
axios({
  method:'delete',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.1.6. 并发请求

并发请求就是同时进行多个请求，并统一处理返回值

使用axios.all进行并发请求，使用axios.spread对返回的结果分别进行处理

axios.all([axios.get("/user"), axios.get("/product")]).then(
  axios.spread((userRes, productRes) => {
    console.log(userRes, productRes);
  })
);
1
2
3
4
5

4. Axios实例

4.1. Axios实例是什么

Axios实例是Axios库中的一个对象，它允许创建具有自定义配置的独立实例，以便在不同的请求中使用不同的设置。

使用Axios实例可以设置默认的请求配置、自定义拦截器、设置基本URL等。这对于在项目中的不同部分使用不同的配置非常有用，或者当需要同时与多个服务器进行通信时。

比如有两个接口请求，一个请求超时时间是10s, 另一个是30s，这时就可以创建两个实例，配置不同的超时时间

4.2. 创建Axios实例

// 实例1
let instance = axios.create({
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/user').then(res=>{
  console.log(res)
})
//实例2
let instance2 = axios.create({
  baseURL: "http://loacalhost:8081",
  timeout: 3000
});
instance2.get("/product").then(res => {
  console.log(res);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

axios实例常用配置：

1. baseURL 请求的域名，基本地址，类型：String
2. timeout 请求超时时长，单位ms，类型：Number
3. url 请求路径，类型：String
4. method 请求方法，类型：String
5. headers 设置请求头，类型：Object
6. params 请求参数，将参数拼接在URL上，类型：Object
7. data 请求参数，将参数放到请求体中，类型：Object

示例如下：

// 创建一个Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  url: '/user',
  method: 'post',
  headers: {'Authorization': 'Bearer your_token'},
  params: {id:1}
});
1
2
3
4
5
6
7
8
9

4.3. Axios配置

4.3.1. axios全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 2000
1
2

4.3.2. axios实例配置

let instance = this.$axios.create();
instance.defaults.timeout = 3000;
1
2

4.3.3. axios请求配置

instance.get('/user.json',{
  timeout:5000
})
1
2
3

配置的优先级为：请求配置 > 实例配置 > 全局配置

5. 拦截器

5.1. 拦截器是什么

Axios中的拦截器是一种机制，允许你在发送请求之前和接收响应之后对请求和响应进行拦截和处理。拦截器可以用于添加公共的请求头、请求参数处理、错误处理等。

Axios提供了两种类型的拦截器：请求拦截器和响应拦截器。

5.2. 请求拦截器

请求拦截器允许你在发送请求之前对请求进行修改或添加额外的配置。你可以使用axios.interceptors.request.use()方法来添加请求拦截器。下面是一个示例：

axios.interceptors.request.use(config {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer your_token';
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
1
2
3
4
5
6
7
8

在上面的示例中，我们使用axios.interceptors.request.use()方法添加了一个请求拦截器。拦截器函数接收一个config对象作为参数，你可以在这里修改请求的配置，比如添加请求头。

5.3. 响应拦截器

响应拦截器允许你在接收到响应之后对响应进行拦截和处理。你可以使用axios.interceptors.response.use()方法来添加响应拦截器。下面是一个示例：

axios.interceptors.response.use(response {
  // 对响应数据做些什么
  console.log(response.data);
  return response;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});
1
2
3
4
5
6
7
8

在上面的示例中，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器。拦截器函数接收一个response对象作为参数，你可以在这里对响应数据进行处理，比如打印响应数据。

5.4. 取消拦截器

let inter = axios.interceptors.request.use(config=>{
  config.header={
    auth:true
  }
  return config
})
axios.interceptors.request.eject(inter)
1
2
3
4
5
6
7

6. 错误处理

不管请求拦截器还是响应拦截器，只要发生错误都会执行catch方法

//  请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    return config;
  },
  err => {
    // 在请求错误的时候的逻辑处理
    return Promise.reject(err);
  }
);
// 响应拦截器
axios.interceptors.response.use(
  res => {
    // 在请求成功后的数据处理
    return res;
  },
  err => {
    // 在响应错误的时候的逻辑处理
    return Promise.reject(err);
  }
); 
axios
  .get("/user")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    // 这个可以捕获请求/响应拦截中的错误，进行相关处理
    console.log(res);
  });
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

7. 取消请求

这个比较少用

使用的场景：在查询数据的时候，长时间仍未获取数据，这个时候需要取消请求

let source = axios.CancelToken.source();
axios
  .get("/user", {
    cancelToken: source.token
  })
  .then(res => {
    console.log(res);
  }).catch(err=>{
    console.log(err)
  })
// 取消请求(参数msg)
source.cancel('自定的的字符串可选')
1
2
3
4
5
6
7
8
9
10
11
12

8. 实际项目中的一个请求类（request.js）

import axios from 'axios'

const request = axios.create({
  baseURL: '/api', 
  timeout: 5000
})
let token = '';
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
  let user = JSON.parse(window.sessionStorage.getItem('access-user'));
  if (user) {
    token = user.token;
  }
  config.headers.common['token'] = token;
  //console.dir(config);
  return config;
}, function (error) {
  // Do something with request error
  console.info("error: ");
  console.info(error);
  return Promise.reject(error);
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data;
    // 如果是返回的文件
    if (response.config.responseType === 'blob') {
      return res
    }
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    return res;
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

// 以request暴露出去
export default request
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
47
48
49