后端推送互联网的方式有多种不同:
1.AJAX (ES5)
2.Fetch (ES6)
3.axios(服务器端应用程序)
采用方式:
一、浏览
即使axios为服务器端应用程序,在任何人工程项目中假如须要采用,都须要先浏览就可以采用
npm i axios二、采用
1.导入,在须要采用axios的文档中导入
import axios from axios;export default{ created(){this.getStudents() ; //初始化getStudents() 那个方式 } methods:{ async getStudents(){ 透过await转交允诺结论,await是触发器表达式,因此后面getStudents方式要加之async,await跟async是成对再次出现 const res= await axios({ //透过axios再次出现允诺 //允诺门牌号(服务端的门牌号http://xxx:3008+天然资源门牌号students) url:“http://xxx:3008/students ”, //允诺类别 method:‘GET’, }) console.log(res); }, }, }3.后端跟后端不在同一个服务器允诺会报错。vue工程项目创建时会自动搭建一个小型服务器,门牌号为 localhost:8080(ip门牌号:8080)。跟后端的服务器门牌号不一样。一个服务器向另一个服务器推送允诺,浏览器“同源策略”限制不允许跨域,因此会报错。
处理跨域问题:
vue.config.js文档:
//当前文档配置再次出现变化,工程项目须要重启module.exports=defineConfig({ devServer:{ proxy:{ /api’:{//匹配工程项目中所有以api开通的允诺 target:‘http://xxx:3008’, //目标允诺的路径,目标服务器门牌号 changeOrigin:true,//解决跨越 pathRewrite:{ ^/api : //把推送到服务器端后把/api去掉,替换成空字符串 } } } } })即使匹配了/api允诺,因此axios允诺门牌号会再次出现变化:
export default{ created(){ this.getStudents() ;//初始化getStudents() 那个方式 } methods:{ async getStudents(){ 透过await转交允诺结论,await是触发器表达式,因此后面getStudents方式要加之async,await跟async是成对再次出现 const res= await axios({ //透过axios再次出现允诺 //允诺门牌号 url:“/api/students ”,//原服务器端的门牌号‘’http://xxx:3008‘’变为‘’/api‘’ //允诺类别 method:‘GET’, }) console.log(res); }, }, }这样axios允诺基本完成,同时解决跨越问题的报错。
跨域图示:
什么是跨域
