2024年最新vue工程 axios请求数据传统使用方法介绍+经验优化使用方法(3)，web前端面试问题汇总

最后

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

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

96道前端面试题：

• 

常用算法面试题：

• 

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

• 

备注一个知识点吧：

有些小白可能搞不清楚，–save  --dev  -S -D的区别，简单说下：

npm install X --save 也就是-S，会把依赖包安装在生产环境中，并且把依赖包名称添加到 package.json 文件 dependencies。

npm install X --save-dev ，也就是-D，则会把依赖包安装在开发环境中，并且添加到 package.json 文件 devDependencies

如果vue项目要部署上线，为防止依赖包失效，一般采用–save。

绝大多数项目的开发，应该是需要部署上线的，所以如果记不住，就全部用–save吧

三、axios入口配置

===========

题外话：在vue项目中，插件的使用，其入口文件一般都在main.js中引入，因为main.js是项目运行时候首先运行的文件。

入口配置的目的是，如果不配置的话，任何vue文件中，如果要使用的话，都需要import axios form 'axios’这样先引入再使用，这一般不是我们所希望看到的便捷的使用方式，任何一个项目，请求后台数据的地方都多，所以需要有个一劳永逸的设置，这就需要在入口时候配置下，跟vue属性绑定到一块，可以直接调用。

在main.js中设置：

import qs from ‘qs’;

import axios from “axios”;

//下面是将$axios和$qs挂在原型上，以便在实例中能用 this.$axios能够拿到

Vue.prototype.$axios = axios;

Vue.prototype.$qs = qs;

四、axios使用

=========

4.1 get请求

---

4.1.1 不带参数

this.$axios.get(“url地址”).then(res => {

console.log(res);

})

4.1.2 带参数

this.$axios.get(“url地址”,{

params:{

phone:12345678 //参数，键值对，key值：value值

name:hh

}

}).then(res => {

//获取你需要用到的数据

});

4.2 post请求

---

this.$axios.post(“后台接口地址”,this.$qs.stringify({phone：12345678，name：hh})

).then(res =>{

//获取你需要的数据

});

4.3 post带token

---

this.$axios.post(“后台接口地址”,{

params:this.$qs.stringify({phone：12345678，name：hh}),

headers:{

‘token’:‘43435454543’,

‘content-type’:‘application/json’}

}

).then(res =>{

//获取你需要的数据

});

五、改进优化设置

========

开发中的URL地址一致都是由协议+域名+端口+接口路由+参数等组成，通常这些中协议+域名是一样的，需要不断的被复用，并且很多开发环境和部署环境很多时候IP地址和端口都不一样，但接口路由之类的都是一样的，如果更换后台部署环境的话，需要找每个用到的地方进行修改，太麻烦。

所以可以设置一个全局的环境，用来存储公用的协议+域名，这样更换后台部署环境时候，只需要改一次即可。具体操作如下：

1）新建一个globalUrl.js文件

//globalUrl.js文件

const myUrl=“http://123.456.78.10”;

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

/123.456.78.10";

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

[外链图片转存中…(img-DDUmUPIr-1715712597800)]