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安装

1. npm install axios

复制代码

2.2. Axios使用

在组件中引入axios并使用

1. <template>
2.   <div class="hello">
3.     <button @click="get">GET请求</button>
4.   </div>
5. </template>
7. <script>
9. import axios from "axios"
11. export default {
12.   methods: {
13.     get(){
14.       axios.get('/user').then(res=>{
15.         console.log(res.data);
16.       })
17.     }
18.   }
19. }
20. </script>

复制代码

3. Axios请求方式

3.1. axios中常用请求方法

get：获取数据
post：向指定资源提交数据（例如表单提交或文件上传）
put：更新数据（全部数据推送到服务端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
3.1.1. get方法

3.1.1.1. 方式1

不带参数

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

复制代码

带参数

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

复制代码

3.1.1.2. 方式2

不带参数

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

复制代码

带参数

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

复制代码

GET请求参数会在URL中展示出来，结果如下
URL：http://localhost:8080/user?id=1
3.1.2. post方法

常用的两种post请求类型

• application/json 一样平常是用于 ajax 异步请求
  
• form-data 表单提交，图片上传、文件上传
  

3.1.2.1. application/json

使用json格式请求，平时最常用
请求头中Content-Type: application/json;charset=UTF-8
方式1

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

复制代码

方式2

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

复制代码

3.1.2.2. form-data

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

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

复制代码

3.1.3. put方法

3.1.3.1. 方式1

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

复制代码

3.1.3.2. 方式2

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

复制代码

3.1.4. patch方法

3.1.4.1. 方式1

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

复制代码

3.1.4.2. 方式2

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

复制代码

3.1.5. delete方法

3.1.5.1. 方式1：params

params方式会将请求参数拼接在url上面
http://localhost:8080/user?id=1

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

复制代码

3.1.5.2. 方式二：data

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

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

复制代码

3.1.6. 并发请求

并发请求就是同时进行多个请求，并统一处理返回值
使用axios.all进行并发请求，使用axios.spread对返回的结果分别进行处理

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

复制代码

4. Axios实例

4.1. Axios实例是什么

Axios实例是Axios库中的一个对象，它允许创建具有自定义设置的独立实例，以便在不同的请求中使用不同的设置。
使用Axios实例可以设置默认的请求设置、自定义拦截器、设置基本URL等。这对于在项目中的不同部分使用不同的设置非常有效，大概当需要同时与多个服务器进行通讯时。
比如有两个接口请求，一个请求超时时间是10s, 另一个是30s，这时就可以创建两个实例，设置不同的超时时间
4.2. 创建Axios实例

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

复制代码

axios实例常用设置：

• baseURL 请求的域名，基本所在，类型：String
  
• timeout 请求超时时长，单位ms，类型：Number
  
• url 请求路径，类型：String
  
• method 请求方法，类型：String
  
• headers 设置请求头，类型：Object
  
• params 请求参数，将参数拼接在URL上，类型：Object
  
• data 请求参数，将参数放到请求体中，类型：Object
  

示例如下：

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

复制代码

4.3. Axios设置

4.3.1. axios全局设置

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

复制代码

4.3.2. axios实例设置

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

复制代码

4.3.3. axios请求设置

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

复制代码

设置的优先级为：请求设置 > 实例设置 > 全局设置
5. 拦截器

5.1. 拦截器是什么

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

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

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

复制代码

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

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

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

复制代码

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

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

复制代码

6. 错误处理

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

1. //  请求拦截器
2. axios.interceptors.request.use(
3.   config => {
4.     // 在发送请求前做些什么
5.     return config;
6.   },
7.   err => {
8.     // 在请求错误的时候的逻辑处理
9.     return Promise.reject(err);
10.   }
11. );
12. // 响应拦截器
13. axios.interceptors.response.use(
14.   res => {
15.     // 在请求成功后的数据处理
16.     return res;
17.   },
18.   err => {
19.     // 在响应错误的时候的逻辑处理
20.     return Promise.reject(err);
21.   }
22. );
23. axios
24.   .get("/user")
25.   .then(res => {
26.     console.log(res);
27.   })
28.   .catch(err => {
29.     // 这个可以捕获请求/响应拦截中的错误，进行相关处理
30.     console.log(res);
31.   });

复制代码

7. 取消请求

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

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

复制代码

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

1. import axios from 'axios'
3. const request = axios.create({
4.   baseURL: '/api',
5.   timeout: 5000
6. })
7. let token = '';
8. // request 拦截器
9. // 可以自请求发送前对请求做一些处理
10. // 比如统一加token，对请求参数统一加密
11. //添加一个请求拦截器
12. axios.interceptors.request.use(function (config) {
13.   let user = JSON.parse(window.sessionStorage.getItem('access-user'));
14.   if (user) {
15.     token = user.token;
16.   }
17.   config.headers.common['token'] = token;
18.   //console.dir(config);
19.   return config;
20. }, function (error) {
21.   // Do something with request error
22.   console.info("error: ");
23.   console.info(error);
24.   return Promise.reject(error);
25. });
27. // response 拦截器
28. // 可以在接口响应后统一处理结果
29. request.interceptors.response.use(
30.   response => {
31.     let res = response.data;
32.     // 如果是返回的文件
33.     if (response.config.responseType === 'blob') {
34.       return res
35.     }
36.     // 兼容服务端返回的字符串数据
37.     if (typeof res === 'string') {
38.       res = res ? JSON.parse(res) : res
39.     }
40.     return res;
41.   },
42.   error => {
43.     console.log('err' + error) // for debug
44.     return Promise.reject(error)
45.   }
46. )
48. // 以request暴露出去
49. export default request

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。