Web前端最全【Vue】Axios详解_vue-axios，2024年最新阿里前端研发岗二面_前端axios

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

2.2.2.2.3 配置请求拦截器

// 添加请求拦截器
requests.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

1
2
3
4
5
6
7
8
9

这里也解决了我困惑已久的一个问题：为什么以前返回的数据没有code，只有单纯的一个数据。

我一度以为要在后端写。

如果这里返回的是config，那么就会有data,status,statusText, headers等等，如果只是返回config.data，那么你看到的就只有data数据了。

2.2.2.2.4 配置响应拦截器

requests.interceptors.response.use(function (response) {
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

1
2
3
4
5
6
7
8

2.2.2.2.5 暴露

如果不暴露是不能用的

export default requests;

1
2

2.2.2.2.6 例子

import axios from "axios";
const requests = axios.create({
    baseURL: '/api',
    timeout: 50000,
  });
// 添加请求拦截器
requests.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
requests.interceptors.response.use(function (response) {
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  
export default requests;

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

2.3 Axios的直接使用

此处的requests 是2.2中axios.create()返回的值，使用前需要引入requests

2.3.1 get请求

2.3.1.1 无参

requests.get('url');

1
2

举例：如我想要访问的是localhost:9000/api/song/SongAllSheet

api在baseURL里面配置了，所以我只需要写成

 requests.get('/song/SongAllSheet');

1
2

2.3.1.2 有参

/Opera/getPersonalOpera是URL，value是你参数的名字

requests.get(`/Opera/getPersonalOpera/${value}`);

1
2

2.3.2 Post请求

axios.post("url",{
		params:{
				 name:'jok',
				 age:'18'
			   }
})

1
2
3
4
5
6
7

2.3.3 通用（常用）

2.3.3.1 无参

get请求methods:后面为get，post则为post

requests({url:'/Opera/getPersonalOpera',methods:'get'})

1
2

2.3.3.2 有参

此处用的是``，英文下，Tab上面的那个键

requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})

1
2

2.3.4 例子

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs() {
      let result = await requests.get('/song/SongAllSheet');
      if(result.status == 200)
      {
        this.Song =  result.data;
      }
      
    },
    async getSongById(value)
    {
       let result = await requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})
        if(result.status == 200)
        {
            this.secondSong = result.data;
        }
       
    }
  },
  mounted() {
 
      this.getAllSongs();
      this.getSongById(1);
  },
  
}
</script>

 


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

可以看到是成功拿到数据的

解决返回数据是Promise的情况

所以只需要在方法里面直接赋值即可

2.4 接口统一管理

2.4.1 接口统一管理的原因

对于较小的项目，使用时在撰写无伤大雅

对于一些比较大型项目，随意写接口，如果后端的接口稍有改动，那么维护起来非常的困难

所以把所有的接口放在一起，而且抽象成一个方法，这样使用起来不需要重复写，而且改动起来也比较方便

2.4.2 接口管理

2.4.2.1 新建一个index.js文件 放置接口，引入axios

import requests from "./request";

1
2

2.4.2.2 编写接口方法

原版

export const reqGetAllSongById = (value)=>{
    return requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'});
}
export const reqGetAllSong = ()=>{
    return requests({url:'/Opera/getPersonalOpera',methods:'get'});
}

1
2
3
4
5
6
7

简写版

export const reqGetAllSong = ()=>requests({url:'/Opera/getPersonalOpera',methods:'get'});
export const reqGetAllSongByType = (value)=>  requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'});

1
2
3

2.4.2.3 接口全局注册

这样虽然好管理了，但是如果使用的话，还需要一一引入。

在如上位置，写如下代码

import \* as API from '@/api'
 beforeCreate(){
    Vue.prototype.$API = API;
  },

1
2
3
4
5
6

使用之时，前缀加上this.$API便可正常使用

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs()
    {
      let result = await this.$API.reqGetAllSongByType(1);
      if(result.status==200)
      {
        this.Song = result.data;
      }
    }
  },
  mounted() {
    this.getAllSongs();
      
  },
  
}
</script>

 


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

访问成功

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• [外链图片转存中…(img-U4ZT0gAw-1715876151692)]

常用算法面试题：

• [外链图片转存中…(img-VMdx0h05-1715876151692)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• [外链图片转存中…(img-jY0GDGBW-1715876151693)]