• VUE之axios总结

    目录

    什么是axios

    功能特点

    请求类型

    定义axios前缀

    axios的书写格式

    属性信息

    params和data的方式区别

    params

    data 

    使用案例

    使用前

    axios简写形式

    注意：

    简写形式实践

    针对不同请求类型的用法 

    post形式与put形式

    get形式与delete形式

    get形式与delete的参数拼接形式

    restful形式 

    注意：

    使用方式

    全局引用axios

    axios网络请求的封装

    封装方案

    网络请求的跨域解决方案

    js采取的是同源策略

    非同源限制

    解决跨域问题的方案

    前台跨域解决案例

    前端通过代理访问后端服务

    后端服务

    什么是axios

    Axios（ajax input output system）是一个开源的可以用在浏览器端和node.js端的异步通信框架，他的主要作用是实现ajax异步通信

    功能特点

    1. 从浏览器中创建xmlHttpRequests
    2. 从node.js中创建http请求
    3. 拦截请求和响应
    4. 转换请求数据和响应数据
    5. 取消请求
    6. 自动转换json数据
    7. 客户端支持防御xsrf（跨站请求伪造攻击）

    注意：vue中封装了ajax并增强了他，在异步并发处理上要优于原生的ajax

    请求类型

    • post：新增操作
    • put：修改操作
    • get：查询操作
    • delete：删除操作 

    定义axios前缀

    写法：axios.defaults.baseURL="前缀名称"

    结果：写了前缀之后，那么后面的axios请求路径就可以简写（去掉前缀）

    axios的书写格式

    1. axios({
    2.     url:"地址信息",
    3.     method:"请求方法",
    4.     params:{name:"lili"},
    5.     data:{name:"lili"}
    6. }).then(res=>{
    7.     <!--结果被封装到promise的data中-->
    8.     console.log(res.data)
    9. })

    属性信息

    • url：请求的路径
    • method：请求方式
    • params：请求参数
    • data：请求参数

    params和data的方式区别

    params

    • params的方式以name=value&name=value的格式发送请求参数，传送的参数为无格式对象
    • 不管使用的请求方式是get还是post，请求参数都会被拼接到请求地址后
    • 此种方式的数据可以直接获取参数

    data 

    • data是以json串的方式发送请求参数
    • 请求参数会被保存到请求报文的请求体中
    • 此种方式获取的参数为json，需要你转化为java对象
    • 此种方式只适用于put、post、patch方法（get方式没有请求体）

    使用案例

    使用前

    安装axios：npm install --save axios

    安装querystring：npm install --save querystring

    组件中引入：

    import axios from "axios"

    import querystring from "querystring"

    1. <template>
    2. <div id="a">
    3.     {{msg}}
    4. </div>
    5. </template>
    6. <script>
    7. import axios from "axios"
    8. import querystring from "querystring"
    9. export default{
    10.     name:"mycomponent",
    11.     data() {
    12.         return {
    13.             msg:""
    14.         }
    15.     },
    16.     mounted() {
    17.         // get请求方式
    18.         axios({
    19.             method:"get",
    20.             url:"https://limestart.cn/"
    21.         }).then(res =>{
    22.             console.log(res.data);
    23.             this.msg=res.data
    24.         })
    25.     // post请求参数
    26.     axios({
    27.         method:"post",
    28.         url:"http://iwenwiki.com/api/blueberrypai/login.php",
    29.         data:querystring.stringify({
    30.             user_id:"iwen@qq.com",
    31.             password:"iwen123",
    32.             verification_code:"crfvw"
    33.         })
    34.     }).then(res=>{
    35.         console.log(res.data);
    36.     })
    37.     },
    38. }
    39. </script>

    注意：data里面的数据必须传递为json格式

    axios简写形式

    1. axios.请求方法("url地址信息"，参数信息)
    2. .then(function(promise){console.log(promise.data)}) 

    注意：

    • axios.请求方法("url地址信息"，参数信息)为一个promise对象，请求的结果被封装到data属性中
    • 将"axios.请求方法("url地址信息"，参数信息)"函数返回值做为即将回调函数的参数，promise 

    简写形式实践

    1. <template>
    2. <div id="a">
    3.     {{msg}}
    4. </div>
    5. </template>
    6. <script>
    7. import axios from "axios"
    8. import querystring from "querystring"
    9. export default{
    10.     name:"mycomponent",
    11.     data() {
    12.         return {
    13.             msg:""
    14.         }
    15.     },
    16.     mounted() {
    17.         // get请求方式
    18.         axios.get("https://limestart.cn/")
    19.         .then(res=>{
    20.             console.log(res.data);
    21.         })
    22.         // post请求参数
    23.         axios.post("http://iwenwiki.com/api/blueberrypai/login.php",querystring.stringify({
    24.             user_id:"iwen@qq.com",
    25.             password:"iwen123",
    26.             verification_code:"crfvw"
    27.         })).then(res=>{
    28.         console.log(res.data);
    29.         })
    30.     },
    31. }
    32. </script>

    针对不同请求类型的用法 

    post形式与put形式

    1. axios.请求方法("url地址"，对象名称) 
    2. .then(function(promise){console.log(promise.data)}) 

    get形式与delete形式

    1. axios.请求方法("url地址"，{params：对象名称}) 
    2. .then(function(promise){console.log(promise.data)}) 

    注意：对于{params：对象名称}参数浏览器会将里面的对象解析后再将参数自动拼接

    get形式与delete的参数拼接形式

    参数拼接url写法：http://localhost:8080/del?age=9&name=lili&hobby=篮球&hobby=足球

    理解参数拼接：路径后面的属性由？隔开，多个属性之间用&连接

    1. axios.请求方法("url地址带拼接参数") 
    2. .then(function(promise){console.log(promise.data)})  

    restful形式 

    restful形式的写法：http://localhost:8080/del/9/lili

    restful形式理解：路径与参数值之间都用/拼接

    注意：

    • restful写法参数值在url内编辑
    • 参数与参数之间用/分割
    • restful分割数据位置有着严格的顺序（想想就知道）
    • restful结构中，请求路径中不能出现动词，为了隐藏目的
    • restful形式写法支持get/post/put/delete等请求方式  
    • restful形式的请求若为post/put，则后面的对象名称需要书写

    使用方式

    1. axios.请求方法("url地址信息restful形式",[对象名称])
    2. .then(function(promise){console.log(promise.data)}) 

    全局引用axios

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import './registerServiceWorker'
    4. //引入axios
    5. import axios from "axios"
    6. const app=createApp(App)
    7. //将axios挂载到全局
    8. app.config.globalProperties.$axios=axios
    9. // 使用时直接this.$axios()来调用axios
    10. app.mount('#app')

    axios网络请求的封装

    前言：在日常应用过程中，一个项目中的网络请求会很多，此时一般采用的方案是将网络请求封装起来

    封装方案

    安装axios：npm install --save axios

    安装querystring：npm install --save querystring

    组件中引入：

    import axios from axios

    import querystring from "querystring"

    1. import axios from "axios"
    2. import querystring from "querystring"
    3.  
    4. const errorHandle=(status,info)=>{
    5.     switch(status){
    6.         case 400:
    7.             console.log("语义有误");
    8.             break
    9.         case 401:
    10.             console.log("服务器认证失败");
    11.             break
    12.         case 403:
    13.             console.log("服务器拒绝访问");
    14.             break
    15.         case 404:
    16.             console.log("地址错误");
    17.             break
    18.         case 500:
    19.             console.log("服务器遇到意外");
    20.             break
    21.         case 502:
    22.             console.log("服务器无响应");
    23.             break
    24.         default:
    25.             console.log(info);
    26.             break
    27.     }
    28. }
    29. /* 创建自己的网络请求对象 */
    30. const instance=axios.create({
    31.     /* 网络请求的公共配置 */
    32.     timeout:5000
    33. })
    34. //拦截器常用
    35. //发送数据之前
    36. instance.interceptors.request.use(
    37.     //拦截成功执行的函数
    38.     //config包含网络请求的所有信息
    39.     config=>{
    40.         if(config.methods==="post"){
    41.             /* 转化post请求参数格式 */
    42.             config.data=querystring.stringify(config.data)
    43.         }
    44.         return config
    45.     },
    46.     //拦截失败执行的函数
    47.     error=>{
    48.         return Promise.reject(error)
    49.     }
    50. )
    51. //获取数据之前
    52. instance.interceptors.response.use(
    53.     //成功时返回结果
    54.     response=>{
    55.         return response.status===200?Promise.resolve(response):Promise.reject(response)
    56.     },
    57.     //失败时返回结果
    58.     error=>{
    59.         const {response}=error
    60.         // 错误处理才是重中之重
    61.         errorHandle(response.status,response.info)
    62.     }
    63. )
    64. export default instance

    使用：直接把此导出的instance作为axios实例引入就直接使用 

    网络请求的跨域解决方案

    js采取的是同源策略

    同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名、端口、协议相同的数据接口上的数据，这就是同源策略

    理解：当协议、域名、端口号任意一个不相同时，都会产生跨域问题

    非同源限制

    • 无法读取非同源网页的cookie、localStorage和IndexedDB
    • 无法接触非同源网页的dom
    • 无法向非同源地址发送ajax请求 

    解决跨域问题的方案

    • 后台解决：cors
    • 前台解决：proxy

    前台跨域解决案例

    前端通过代理访问后端服务

    1. <template>
    2.   <div id="container">
    3.     <button @click="send">点击调用</button>
    4.   </div>
    5. </template>
    6. <script>
    7. export default {
    8.   name:"app",
    9.   methods: {
    10.     send() {
    11.       //这里的开头用代理（我全局配置了axios）
    12.       this.$axios.get("/randomPath/user/login?username=lili&password=123").then(
    13.         function(promise) {
    14.           console.log(promise.data);
    15.         })
    16.     }
    17.   }
    18. }
    19. </script>
    1. //vue.config.js文件内
    2. const { defineConfig } = require('@vue/cli-service')
    3. module.exports = defineConfig({
    4.   transpileDependencies: true,
    5.     /* 解决跨域问题的配置 */
    6.     devServer:{
    7.       //配置代理
    8.       proxy:{
    9.       "/randomPath":{
    10.         //参数为产生跨域的域名地址
    11.         target:"http://localhost:8888",
    12.         //设置true后，那么会在本地创建一个虚拟服务端（同域的），然后发送请求的数据并同时接收请求的数据，这样服务端和服务端进行数据交互就不会有跨域问题了
    13.         changeOrigin:true,
    14.         //路径重写
    15.         pathRewrite:{
    16.           //用来替换target中得到请求地址（前面为正则匹配）
    17.           //也就是你在请求target中的地址时直接写成/randomPath即可
    18.           '^/randomPath':''
    19.         }
    20.       }
    21.     }
    22.   }
    23. })

    注意：前端解决完跨域之后，要记得重启服务器 

    后端服务

    注意：后端端口号为8888提供服务，并且并没进行跨域配置

    1. @RestController
    2. @RequestMapping("/user")
    3. public class GetMsg {
    4.     @GetMapping("/login")
    5.     public String doLogin(@RequestParam("username") String username,@RequestParam("password") String password){
    6.         System.out.println("请求进来了");
    7.         return "你的名字为"+username+"你的密码为"+password;
    8.     }
    9. }

     

  • 相关阅读:
    使用canal实现数据实时同步
    天线原理【1】 天线辐射的物理过程
    『亚马逊云科技产品测评』活动征文｜通过lightsail一键搭建Drupal VS 手动部署
    MySQL第五讲：工作中常用的sql语句
    Selenium基础 — Selenium元素定位（一）
    Pico示波器 汽车振动异响(NVH)解决方案
    socket通信原理？10分钟掌握python socket实现邮件客户端吧！
    Lua脚本语言
    nginx反向代理tcp网络访问
    【直播回顾】昇思MindSpore易用性SIG2022上半年回顾总结
  • 原文地址：https://blog.csdn.net/m0_60027772/article/details/126971505