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

前端发送网络的方法有多种：

1.AJAX (ES5)

2.Fetch （ES6）

3.axios（第三方插件）

使用方法：

一、下载

因为axios为第三方插件，在任何项目中如果需要使用，都需要先下载才能使用

npm i axios

二、使用

1.引入，在需要使用axios的文件中引入

import axios from 'axios';

2.使用，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请求基本完成，同时解决跨越问题的报错。

跨域图示：