Axios基本使用 [前后端交互][Axios框架]

Axios基本使用

Axios是Ajax的一个框架

axios: 功能强大的网络请求库

axios必须要先导入才可以使用

• axios为一个js库, 使用前必须先导包

• 我们可以通过如下地址, 在保证联网的状态下就可以导入成功:

  • <script src = "https://anpkg.com/axios/dist/axios.min.js"></script>
    

在axios导入成功后会在页面上创建一个axios全局对象, 我们就可以通过这个名为"axios"的全局对象来发送请求了

get请求:

axios.get(地址?查询字符串).then( function ( response){ … }, function( err ){ … })

• 上面的axios就是axios全局对象
• get请求中是以查询字符串的形式发送的请求, 如果请求, 响应完成之后, 那么就会执行then()方法中的第一个回调函数, 如果请求失败, 那么就会执行then()方法中的第二个回调函数
  • 通过回调函数的形参可以获取响应内容或者错误信息
  • 这里查询字符串的格式为: key = value & key2 = value
    • 其中的key为请求参数名, 这个请求参数名要求和接口一致, value的值就是自己设置了

POST请求:

axios.post(地址 , 参数对象).then( function(response){ … } , function(err){ … })

• post请求中是以参数对象的形式发送的请求参数, 如果请求,响应完成之后,那么就会执行then()方法中的第一个回调函数, 如果请求失败, 那么就会执行then()方法中的第二个回调函数
  • 通过回调参数的形参可以获取响应内容或者错误信息
  • 这里的参数对象的格式为: {key:value, key2:value}
    • 首先是一个javaScript对象,那么就是{}, 其中的key是请求参数名, value为请求参数值, 对于key(请求参数名)要求与接口文档一致

使用axios全局对象的get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息

使用axios发送并发请求:

并发请求: 将多个请求在同一时刻发送到后端服务器接口中, 最后再集中处理每个请求的响应结果

通过举例说明:

//创建一号请求方法
function findAll(){
    return axios.get("http://localhost:8989/user/findAll?name=zhangsan");
}

//创建二号请求方法
function save(){
    return axios.post("http://localhost:8989/user/save",{
        username : "xiaochen",
        age : 23,
        email : "xiaochen@zparkhr.com"
    });
}

//并发执行
 //调用axios对象的all()方法, 在参数中传入一个数组, 数组中就是我们编写好的多个请求函数
axios.all([findAll(),save()]).then(
    //获取响应数据是通过then回调函数中使用axios对象调用spread()函数, 在spread()函数中的第一个函数位置会获取到响应数据, 会获取到所有的并发请求的响应数据, 每个响应数据分别作为一个函数的实参
    axios.spread(function(res1, res2){
        console.log(res1.data);
        console.log(res2.data);
    })
)//发送了一组并发请求

• get方式的请求参数在url后面声明一个params对象, 在对象中使用属性名 : 属性值的形式给出

  • eg:

  • axios.get("http://localhost:8080/webback/loginServlet",
              {
        params:{
            account:this.form.account,
            password:this.form.password
        }
    }
             ).then(res => {
        if(res.data=="登录成功"){
            alert(res.data);
            this.$router.push("/main");
        }else{
            // alert(res.data)
        }
    }).catch(err => {
        alert("访问出错了")
    })
    

• get方式的请求直接在url后面声明一个匿名对象,在对象中使用属性名:属性值的形式给出

补充:

1. axios还可以配合SpringBoot将异步请求直接发送到某个后端的方法中, 这样我们就可以通过异步请求直接将请求数据发送到对应的方法的形参列表中

2. CrossOrigin注解用于解决跨域问题

补充二:

我们下载了axios请求库之后一般都要将axios对象引入到main.js中进行一个全局配置

• 全局配置其实就是将我们的axios对象和vue核心对象进行一个绑定, 然后只要是我们使用vue对象的时候都可以调用处axios对象

  • Vue.prototype.$ = axios

    • 比如说此时其实就是将我们的axios和我们的vue核心对象进行了一个绑定,之后我们只要是可以使用vue核心对象的位置我们都可以使用vue.$来获取到axios对象, 然后就直接就可以使用

  • 那么我们为什么要这样做?

    • 因为在我们的vue项目中的所有位置其实都是可以访问到vue核心对象的, 所以我们将我们的axios对象和vue对象绑定之后使用起来就很方便 —> 如果不将axios对象和vue对象绑定的时候那么我们只要是在任何组件中要使用axios对象发送异步请求的时候都要将我们的axios导入到当前组件中才可以使用