Axios简介

什么是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引入

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：请求服务器删除指定的数据(参数提交形式有明文和封装对象两种)