526互联

Axios简介

发布时间 2023-10-14 16:37:39作者: 3DG

什么是Axios

  • 全称ajax I/O system

  • 基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

  • axios 提供了对 AJAX 的良好封装

学习Axios的前提是学习Ajax，可以看看我的另一篇关于Ajax的博客

Axios特点

  • 在浏览器中创建XMLHttpRequest请求

  • 在node.js中发送http请求

  • 支持Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消要求

  • 自动转换JSON数据

  • 客户端支持防止CSRF/XSRF(跨域请求伪造)

Axios的安装

1)npm安装

bower install axios

2）cdn引入

<script src="../js/axios.min.js"></script>

3）在vue项目的main.js文件引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

Axios请求方式

  • get：获取数据，请求指定的信息，返回实体对象

     getTotalPrice() {
                axios.get("http://localhost:8080/cart/total_price").then(response => {
                    this.totalPrice = response.data.data       
                })
              }

     

 

 

 

  • post：向指定资源提交数据

    • form-data:表单提交，图片上传，文件上传

    • application/json一般用于ajax异步请求

//向服务器发送AJAX请求
                    axios.post("http://localhost:8080/user/register",this.user).then(response=>{
                        if(response.data.code == 200){
                            this.tip = true,
                            this.msg ='注册成功',
                            setTimeout(()=>{
                                this.tip = false
                                //跳转登录页面
                                window.location.href=login.html
                            }, 1000)
                        }

 

 

 

  • put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容

  • patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新

  • delete：请求服务器删除指定的数据(参数提交形式有明文和封装对象两种)