axios请求渲染页面(包括部分跨域的解决,二次封装)
vue2 请求数据渲染
在vue的项目中,一般使用:axios、fetch来发起这个请求
安装axios : cnpm install axios -S 或者使用yarn add axios
使用axios来请求接口
注意:在created中发起请求
发请求到的数据渲染到页面
<template>
<div id="app">
<ul>
<li v-for='item in list' :key='item.id'>
<img :src="item.imageUrl">
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
list:[]
}
},
created(){
axios({
url:'http://testapi.xuexiluxian.cn/api/slider/getSliders'
}).then(res=>{
this.list = res.data.data.list;
})
}
}
</script>
axiox基本写法
axios.get('url?act=1&id=2')
axios.post('url',{
act:1,
id:2
})
let res = await axios({
url:'',
method:'post'//默认是get请求
headers:{}//自定义请求头
data:{} //post请求,前端给后端传递的参数
params:{} //get请求,前端给后端传递的参数
timeout:0//请求超时
responseType:'json',//返回的数据类型
})
axios的二次封装
3.1 在src中新建一个目录utils/request.js
3.2 在request.js写入
import axios from 'axios'
//1. 创建axios对象
const instance = axios.create({
baseURL: 'http://testapi.xuexiluxian.cn/api',
timeout: 5000,
});
//2. 请求拦截器 ===> 前端给后端的参数 [还没到后端响应]
instance.interceptors.request.use(function (config) {
//登录的判断,如果用户是登录状态,会在headers中把用户的token传递给后端
console.log( 1 );
return config;
}, function (error) {
return Promise.reject(error);
});
//3. 响应拦截器 ===> 后端给前端的数据 [后端返回给前端]
instance.interceptors.response.use(function (response) {
//后端给前端数据的时候,会有code码
console.log( 2 );
return response;
}, function (error) {
return Promise.reject(error);
});
//最终返回的axios对象
export default instance;
请求跨域问题
如果测试出现跨域问题
-
cnpm install -g express
-
cnpm install -g express-generator
-
express server --view=ejs
-
server/routes/index.js 自己写一个接口
router.get('/list', function(req, res, next) { res.send({ a:'1' }) });
-
重启server
-
出现跨域的报错
Access to XMLHttpRequest at 'http://localhost:3000/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
设置代理解决
vue.config.js配置:https://cli.vuejs.org/zh/config/
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在“开发环境”下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
***注意:设置代理在开发环境生效,生产环境不生效!!!
在vue.config.js中配置代理来解决跨域的问题
devServer: {
proxy: 'http://localhost:3000'
}
***注意:设置完代理后,一定要重启一下
vue的环境变量
因为devServer.proxy仅在开发阶段生效,所以生产阶段其实是不生效的
项目打包 npm run build
创建环境变量文件
在vue项目根目录创建:
.env.development ==》开发环境
.env.production ==》生产环境
.env文件中属性名必须以 VUE_APP_开头
***调用要重启vue项目
调用.env文件中的变量
process.env.VUE_APP_XXX
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步