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 文件，那么在这个文件中所有的配置项，只能在生产环境下使用。
注意名字千万别敲错了哈，不然不管用。
所以，在配置里面，要以 VUE_APP_ 开头。
那什么样的参数/变量一般需要配置呢？ 首先，代理服务器的地址需要可配置，其次代理前缀需要可配置，因为代理服务器生产环境和测试环境肯定不同，而前缀也可能因为服务器的不同而有所改变。
首先在 .env.development 文件写入配置项
只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到客户端侧的包中进行使用 process.env.VUE_APP_xxx。
文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
这是288页的前端面试题
9395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
