vue 网络请求方法之一:前端axios发送网络请求

2023-02-20 0 1,105

后端推送互联网的方式有多种不同:

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方式要加之asyncawaitasync是成对再次出现 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方式要加之asyncawaitasync是成对再次出现 const res= await axios({ //透过axios再次出现允诺 //允诺门牌号 url:“/api/students ”,//原服务器端的门牌号‘’http://xxx:3008‘’变为‘’/api‘’ //允诺类别 method:‘GET’, }) console.log(res); }, }, }

这样axios允诺基本完成,同时解决跨越问题的报错。

跨域图示:

vue 网络请求方法之一:前端axios发送网络请求

什么是跨域

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务