0
0

VUE之axios总结

什么是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的书写格式

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

属性信息

  • 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"

<template>
<div id="a">
    {{msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios({
            method:"get",
            url:"https://limestart.cn/"
        }).then(res =>{
            console.log(res.data);
            this.msg=res.data
        })
    // post请求参数
    axios({
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res=>{
        console.log(res.data);
    })
    },
}
</script>

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

axios简写形式

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

注意：

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

简写形式实践

<template>
<div id="a">
    {{msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
    name:"mycomponent",
    data() {
        return {
            msg:""
        }
    },
    mounted() {
        // get请求方式
        axios.get("https://limestart.cn/")
        .then(res=>{
            console.log(res.data);
        })
        // post请求参数
        axios.post("http://iwenwiki.com/api/blueberrypai/login.php",querystring.stringify({
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })).then(res=>{
        console.log(res.data);
        })
    },
}
</script>

针对不同请求类型的用法

post形式与put形式

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

get形式与delete形式

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

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

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

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

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

axios.请求方法("url地址带拼接参数") 
.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，则后面的对象名称需要书写

使用方式

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

全局引用axios

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入axios
import axios from "axios"
const app=createApp(App)
//将axios挂载到全局
app.config.globalProperties.$axios=axios
// 使用时直接this.$axios()来调用axios
app.mount('#app')

axios网络请求的封装

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

封装方案

安装axios：npm install --save axios

安装querystring：npm install --save querystring

组件中引入：

import axios from axios

import querystring from "querystring"

import axios from "axios"
import querystring from "querystring"

const errorHandle=(status,info)=>{
    switch(status){
        case 400:
            console.log("语义有误");
            break
        case 401:
            console.log("服务器认证失败");
            break
        case 403:
            console.log("服务器拒绝访问");
            break
        case 404:
            console.log("地址错误");
            break
        case 500:
            console.log("服务器遇到意外");
            break
        case 502:
            console.log("服务器无响应");
            break
        default:
            console.log(info);
            break
    }
}
/* 创建自己的网络请求对象 */
const instance=axios.create({
    /* 网络请求的公共配置 */
    timeout:5000
})
//拦截器常用
//发送数据之前
instance.interceptors.request.use(
    //拦截成功执行的函数
    //config包含网络请求的所有信息
    config=>{
        if(config.methods==="post"){
            /* 转化post请求参数格式 */
            config.data=querystring.stringify(config.data)
        }
        return config
    },
    //拦截失败执行的函数
    error=>{
        return Promise.reject(error)
    }
)
//获取数据之前
instance.interceptors.response.use(
    //成功时返回结果
    response=>{
        return response.status===200?Promise.resolve(response):Promise.reject(response)
    },
    //失败时返回结果
    error=>{
        const {response}=error
        // 错误处理才是重中之重
        errorHandle(response.status,response.info)
    }
)
export default instance

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

网络请求的跨域解决方案

js采取的是同源策略

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

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

非同源限制

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

解决跨域问题的方案

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

前台跨域解决案例

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

<template>
  <div id="container">
    <button @click="send">点击调用</button>
  </div>
</template>
<script>
export default {
  name:"app",
  methods: {
    send() {
      //这里的开头用代理（我全局配置了axios）
      this.$axios.get("/randomPath/user/login?username=lili&password=123").then(
        function(promise) {
          console.log(promise.data);
        })
    }
  }
}
</script>

//vue.config.js文件内
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    /* 解决跨域问题的配置 */
    devServer:{
      //配置代理
      proxy:{
      "/randomPath":{
        //参数为产生跨域的域名地址
        target:"http://localhost:8888",
        //设置true后，那么会在本地创建一个虚拟服务端（同域的），然后发送请求的数据并同时接收请求的数据，这样服务端和服务端进行数据交互就不会有跨域问题了
        changeOrigin:true,
        //路径重写
        pathRewrite:{
          //用来替换target中得到请求地址（前面为正则匹配）
          //也就是你在请求target中的地址时直接写成/randomPath即可
          '^/randomPath':''
        }
      }
    }
  }
})

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

后端服务

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

@RestController
@RequestMapping("/user")
public class GetMsg {
    @GetMapping("/login")
    public String doLogin(@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println("请求进来了");
        return "你的名字为"+username+"你的密码为"+password;
    }
}
标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/m0_60027772/article/details/126971505
版权归原作者 小白菜00 所有， 如有侵权，请联系我们删除。
登录后发布评论

“VUE之axios总结”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Vscode、插件历史版本下载

vscode中用python创建虚拟环境

毕设分享 大数据抖音短视频数据分析与可视化(源码)

【快速入门】Kafka的安装部署

nginx-proxy-manager实现反向代理+自动化证书(实战)

电脑通过USB共享网络给手机上网教程

Python实现微博关键词爬虫

文章导航