axios

Lilbetter.

已于 2022-08-29 14:55:10 修改

阅读量100

点赞数

分类专栏： Vue 文章标签： ajax vue.js

于 2022-04-15 23:21:58 首次发布

本文链接：https://blog.youkuaiyun.com/lilbetter/article/details/124204693

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

1. axios（网络请求库）

功能强大的网络请求库 js库

axios必须先导入才可以使用

使用get 或 post方法即可发送相应的请求

then 方法中的回调函数会在请求成功（第一个回调函数）或失败（第二个回调函数）时触发

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

文档传送门： https://github.com/axios/axios

联网状态下可以访问的接口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios 基本使用</title>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址  导入即可使用axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function (response) { // then 回调函数  服务器响应
                console.log(response);  // 成功时，输出响应信息
              },function(err){   // 失败时的响应
                  console.log(err);  // 输出失败信息
              })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"Lilbetter"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

</html>

2. axios + Vue 结合使用

axios 回调函数中的 this 已经发生改变，无法访问到 data 中的数据

解决办法：把 this 保存起来，然后在回调函数中直接使用保存的 this 即可

和本地应用的最大区别就是改变了数据来源（数据来源于请求服务器中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios + Vue 结合使用</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
</body>
<script>
    // 创建Vue实例
    var app = new Vue({
        el:"#app",
        data:{
            joke:"今天去我哥家吃饭，吃到一半的时候，我媳妇给侄女夹了一块肉。媳妇问：“婶婶和你亲，还是你叔跟你亲啊！”侄女：当然是跟我叔更亲了。媳妇问：这是为什么？侄女说：我叔永远是我叔，而你不一定永远是我婶婶。顿时在场的人都石化了。"
        },
        methods:{
           getJoke:function(){
               // 此时 this 可以 取到data中数据的值
               console.log(this.joke);
               // 复制this
               var newJoke = this;
               // axios发送get请求
               axios.get("https://autumnfish.cn/api/joke").then
               (function(response){
                    // console.log(response);
                    console.log(response.data);
                    // 在then回调函数中 this取不到 data中数据的值
                    // console.log(this.joke);    //undefined
                    newJoke.joke = response.data;
               },function(err){
                    console.log(err);
               })
           }
        }
    })
</script>
</html>