3、还可以在里面定义拦截器。
// 请求拦截器
request.interceptors.request.use( config => {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 处理请求错误
return Promise.reject(error);
});
// 相应拦截器
request.interceptors.response.use( response => {
// 在2xx范围内的任何状态代码都会触发此功能
// 处理响应数据
return response;
}, function (error) {
// 任何超出2xx范围的状态代码都会触发此功能
// 处理响应错误
return Promise.reject(error);
});
到此为止 request.js 整体代码：
// 首先导入 axios
import axios from ‘axios’
// 自己创建一个axios对象
const request = axios.create({
baseURL: ‘/’, // 基础路径，默认是/ ，如果改了，会自动添加到你请求url前面
timeout: 5000 // 请求超时，5000毫秒
})
// 请求拦截器
request.interceptors.request.use( config => {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 处理请求错误
return Promise.reject(error);
});
// 相应拦截器
request.interceptors.response.use( response => {
// 在2xx范围内的任何状态代码都会触发此功能
// 处理响应数据
return response;
}, function (error) {
// 任何超出2xx范围的状态代码都会触发此功能
// 处理响应错误
return Promise.reject(error);
});
export default request // 导出自定义创建的 axios 对象
使用封装的 axios 对象
我们之前封装了一个自己的 axios 对象，拦截器也写了，尽管没内容，但是你去网上搜，大部分拦截器的功能是一样的，这个都能用，后面有时间在写，现在呢，我们的使用一下上面封装的 axios 对象。
首先我们在项目 src 目录下在创建一个文件夹 api ，以后我们调接口都在 api 目录下调用，在 api 文件夹下创建一个 test.js 文件，然后在 test.js 中发送异步请求。
// 首先引入我们自定义的axios对象
import request from ‘@/utils/request’
// 创建一个get请求 第一种，不建议使用
// request.get(‘/db.json’).then( rep =>{
// console.log(‘—>’, rep.data)
// })
// 创建一个get请求，第二种，推荐使用
request({
methods: ‘get’,
url:‘/db.json’
}).then( rep =>{
console.log(‘—>’, rep.data)
})
现在我们测试是可以的，但是我们得把这个请求导出，给组件使用，所以把 test.js 修改一下：
// 首先引入我们自定义的axios对象
import request from ‘@/utils/request’
// 创建一个get请求，第二种，推荐使用
// request({
// methods: ‘get’,
// url:‘/db.json’
// }).then( rep =>{
// console.log(‘get—>’, rep.data)
// })
// 导出对象
export default {
getList(){
// 把请求对象返回，提供给组件使用
const req = request({
methods: ‘get’,
url: ‘/db.json’
})
return req
}
}
在组件中使用：
我最棒
{{item.name}}
访问采用的是同源策略，是指协议、域名、端口都要相同，其中有一个不同，就会产生跨域问题，浏览器就会限制跨域访问。
跨域问题是前端开发经常遇到的问题，在什么时候会遇到跨域问题呢？首先是前后端分离项目，使用vue开发前端项目了，肯定是前后端分离，我在说一个废话，哈哈哈哈，当前端项目和后端，也就是java后台或者是php后台间，他们的IP地址不一样，或者是端口不一样，这时候就会出现跨域问题。
解决跨域问题
比如，前后端项目开发完成，尽管部署在同一服务器下，IP地址肯定是一样的，但是端口肯定是不一样的，比如前段端口是8888，后端端口是8001，这时候就存在跨域问题，人家不让你调用，气人不！哈哈哈哈嗝~ 更有甚者，人家前端一个服务器，后端一个服务器，哈哈哈哈哈，恐怖！
解决跨域：
-
通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。
-
开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置，参考：https://cli.vuejs.org/zh/config/#devserver
如下配置：
module.exports = {
devServer: {
port: 8888, // 端口号，如果端口号被占用，会自动提升1
host: “localhost”, //主机名， 127.0.0.1， 真机 0.0.0.0
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: { // 开发环境代理配置
‘/dev-api’: { // 意思是当请求是以 dev-api 开头的请求，都走代理
// 目标服务器地址，代理访问：http://localhost:8001
target: ‘http://localhost:8001’,
changeOrigin: true, // 开启代理服务器，就会给你代理转发
pathRewrite: {
// /dev-api/db.json 最终会转发到 http://localhost:8001/db.json
‘^/dev-api’: ‘’, // 就是将请求地址中的 /dev-api 前缀替换成空的
}
}
}
},
lintOnSave: false, // 关闭格式检查
productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}
再请求的时候加一个前缀 /dev-api
加了前缀之后，加入我们后期要修改前缀，案例就一个接口好修改，但是如果以后成百上千个接口，一个一个改有些许的费劲，所以我们就把前缀抽取出来，修改接口 test.js 文件内容如下：
// 首先引入我们自定义的axios对象
import request from ‘@/utils/request’
// 将前缀抽取出来，以后改的话就改这个地方就行
const BASE_URI = ‘/dev-api’
// 导出对象
export default {
getList(){
// 把请求对象返回，提供给组件使用
const req = request({
methods: ‘get’,
url: BASE_URI + ‘/db.json’ // 拼接前缀
})
return req
}
}
效果是一样的。
如果后期需要修改跨域服务器的地址，就在 在 vue.config.js 文件中使用 devServer.proxy 选项中修改地址就可以了。
配置完跨域需要重启服务，不然不起作用。
OK！ 跨域的问题没有了，现在可以夸我啦！！！
参考资料：https://cli.vuejs.org/zh/guide/mode-and-env.html
开发环境请求接口数据和生产环境请求接口数据一般是不同的，配置不同环境的目的就是因为接口的不同不至于整天批量改URL。所以为不同的环境配置不同的请求接口 URL，通过路径前的前缀进行匹配，当前只针对的是开发环境，以后如果有生产再说哈。
在项目根目录下创建一个文件，名字叫做 .env.development， 将开发环境的配置项配置到此文件中。
在此文件中配置的各个配置项，都只能在开发环境中使用。
如果在根目录下再创建一个 .env.production 文件，那么在这个文件中所有的配置项，只能在生产环境下使用。
注意名字千万别敲错了哈，不然不管用。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
[外链图片转存中…(img-OWDLT7vC-1712962074182)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
扫一扫
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
