Vue-Axios基本使用

Vue是一个纯前端化的框架,它专注于做前端页面的展示,由于其作者尤雨溪严格按照SOC关注点分离的原则,所以在最初,作者开发出一个Vue-resource的组件,专门用于网络通信,后来发现axios更加适合Vue的网络通信,所以作者就停更Vue-resource的组件,而推荐使用axios来支持通信。

关于axios,我们可以理解为它就是一个发送异步请求的工具。

官方解释:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

由于这里需要请求后端服务器的数据,博主在这里准备了两个网上在线公开的API接口,用于分别测试两种常见的请求方式(get和post方式)。

随机获取笑话的接口
  • 请求地址:https://autumnfish.cn/api/joke/list
  • 请求方法:get
  • 请求参数:num (参数类型为数字,表示请求的笑话条数)
  • 响应内容:随机指定条数的笑话
用户注册的接口
  • 请求地址:https://autumnfish.cn/api/user/reg
  • 请求方式:post
  • 请求参数:username (用户名,字符串类型,不能为空)
  • 响应内容:注册结果(成功或者失败的信息)

演示代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios简单测试title>
head>
<body>

<div id="app">
    
    <button @click="getJoke(3)">get请求测试button>
    
    <div v-show="jokes.length!=0">
        <h1>请求的笑话h1>

        <p v-for="joke in jokes">
            {{ joke }}
        p>
    div>

    <hr>

    
    <input type="text" v-model="username">
    <button @click="postReg">post请求测试button>
    <div>
        {{message}}
    div>

div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

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

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            num: 1,
            username: "",
            jokes: [],
            message: ""
        },
        methods: {
            getJoke: function (num) {

                //由于在异步请求中不能使用this获取Vue实例中的数据对象,这里使用中间变量来替代
                var temp = this;

                //get请求 参数拼接在请求路径之后
                axios.get("https://autumnfish.cn/api/joke/list?num=" + num).then(
                    //成功后的回调 response表示响应结果
                    function (response) {
                        temp.jokes = response.data.jokes;
                    },
                    //失败后的回调 err表示错误信息
                    function (err) {
                        console.log(err);
                    }
                );
            },

            postReg: function () {
                //由于在异步请求中不能使用this获取Vue实例中的数据对象,这里使用中间变量来替代
                var temp = this;

                //post请求 参数用json格式封装
                axios.post("https://autumnfish.cn/api/user/reg",{username:this.username}).then(
                    function (response) {
                        temp.message = response.data;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            }
        }
    });
script>
body>
html>

演示结果:
Vue-Axios基本使用_第1张图片

感兴趣的读者也可以自行测试。

你可能感兴趣的:(Vue)