Vue中axios 安装与操作[通俗易懂]

Ios (107) 2023-03-26 21:56

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说Vue中axios 安装与操作[通俗易懂],希望能够帮助你!!!。
Vue中axios 安装与操作[通俗易懂]_https://bianchenghao6.com/blog_Ios_第1张

1.axios介绍

1. vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现

2. axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

3. 参考：GitHub上搜索axios，查看API文档：https://github.com/axios/axios

2.axios安装

1. npm install axios -S                   # 也可直接下载axios.min.js文件

下载后即到 C:\Users\tom\node_modules\axios\dist  路径下找到 axios.min.js 文件

2. 直接在GitHub上下载： https://github.com/axios/axios

3.axios基本用法

3.1 axios:get的请求参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendGet">GET方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendGet(){
          // 1、发送get请求
          axios({
            url: 'http://127.0.0.1:8000/data/',                 //1、请求地址
            method: 'get',                                        //2、请求方法
            params: {ids: [1,2,3],type: 'admin'},                //3、get请求参数
          })
          // 2、回调函数
          .then(resp => {
            console.log(resp.data);
          })
          // 3、捕获异常
          .catch(err => {
            console.log('请求失败：'+err.status+','+err.statusText);
          });
        }

      }
    });
  }
</script>
</body>
</html>

get: axios最基本get请求参数

3.2 axios post基本请求参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendPost">POST方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendPost(){
          // 1、发送post请求
          axios({
            url: 'http://127.0.0.1:8000/data/',             //1、请求地址
            method: 'post',                                  // 2、请求方法
            data: {ids: [1,2,3],type: 'admin'},              //3、提交数据
            transformRequest:[                               //4、在发送请求前可以改变要传的数据
              function(data){
                let params='';
                for(let index in data){
                  params+=index+'='+data[index]+'&';         //5、拼接成：name=alice&age=20& 的字符串
                }
                return params;
              }
            ]
        })
        // 2、回调函数
        .then(resp => {
          console.log(resp.data);
        })
        // 3、捕获异常
        .catch(err => {
          console.log('请求失败：'+err.status+','+err.statusText);
        });
        }
      }
    });
  }
</script>
</body>
</html>

post: axios发送最基本post请求参数

3. axios get请求参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendGet">GET方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendGet(){
          // 1、发送get请求
          axios({
            url: 'http://127.0.0.1:8000/data/',                 //1、请求地址
            method: 'get',                                        //2、请求方法
            params: {ids: [1,2,3],type: 'admin'},                //3、get请求参数

            paramsSerializer: params => {                          //4、可选函数、序列化`params`
              return Qs.stringify(params, { indices: false })
            },
            responseType: 'json',                                //5、返回默认格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},     //6、认证token
          })
          // 2、回调函数
          .then(resp => {
            console.log(resp.data);
          })
          // 3、捕获异常
          .catch(err => {
            console.log('请求失败：'+err.status+','+err.statusText);
          });
        }

      }
    });
  }
</script>
</body>
</html>

get：axios发送get请求

5.post:axios请求参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendPost">POST方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendPost(){
          // 1、发送post请求
          axios({
            url: 'http://127.0.0.1:8000/data/',             //1、请求地址
            method: 'post',                                  // 2、请求方法
            data: Qs.stringify(                               //3、可选函数、序列化`data`
              {ids: [1,2,3],type: 'admin'},                  //4、提交数据
              { indices: false }                             // indices: false
            ),
            responseType: 'json',                           //5、返回默认格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},//6、身份验证token
        })
        // 2、回调函数
        .then(resp => {
          console.log(resp.data);
        })
        // 3、捕获异常
        .catch(err => {
          console.log('请求失败：'+err.status+','+err.statusText);
        });
        }
      }
    });
  }
</script>
</body>
</html>

post: axios发送post请求

6.后端测试接口

def data(request):
    if request.method == 'GET':
        token_id = request.META.get('HTTP_AUTHORIZATION')  # header中的tokenid
        print(request.GET.getlist('ids'))                   # 获取get请求中列表
        data = {
            'id':1,
            'name': 'zhangsan'
        }
        return HttpResponse(json.dumps(data))
    elif request.method == 'POST':
        token_id = request.META.get('HTTP_AUTHORIZATION')  # header中的tokenid
        print(request.POST.getlist('ids'))                  # 获取post请求中的列表
        data = {
            'id':1,
            'name': 'zhangsan',
            'method': 'POST'
        }
        return HttpResponse(json.dumps(data))

views.py后端测试接口
#1、qs用途：  在 axios中，利用QS包装data数据
#2、安 装:    npm install qs -S
#3、常见用法：
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''

7、vuejs借助axios发送ajax请求(同级目录下创建以下两个文件)

'''1.json'''
{
    "id":1001,
    "name":"秋香",
    "age":18
}

'''2.html'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
</head>
<body>
    <div id="itany">
        <button @click="send">发送AJAX请求</button>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        // name:'alice',
                        // age:19
                    },
                    uid:''
                },
                methods:{
                    send(){
                        axios({
                            method:'get',
                            url:'user.json'
                        }).then(function(resp){        // 请求成功调用此函数
                            console.log(resp.data);    // {id: 1001, name: "秋香", age: 18}
                        }).catch(resp => {              // 请求失败调用此函数
                            console.log('请求失败：'+resp.status+','+resp.statusText);
                        })
                    }
                }
            });
        }
    </script>
</body>
</html>

index.html

8.vuejs借助axios发送get请求

'''server.php'''
<?php
    //获取参数
    $name=$_POST['name'];
    $age=$_POST['age'];

    //响应数据
    echo '姓名：',$name,',年龄：',$age;
?>

server.php

'''index.html'''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
</head>
<body>
    <div id="itany">
        <button @click="sendGet">GET方式发送AJAX请求</button>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        // name:'alice',
                        // age:19
                    },
                    uid:''
                },
                methods:{
                    sendGet(){                        // axios.get('server.php?name=tom&age=23')
                        axios.get('server.php',{
                            params:{
                                name:'alice',
                                age:19
                            }
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('请求失败：'+err.status+','+err.statusText);
                        });
                    },
                }
            });
        }
    </script>
</body>
</html>

index.html

5、vuejs借助axios发送post请求

　　　　　#　1. axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，

　　　　　#　2. 所以参数必须要以键值对形式传递，不能以json形式传参

　　　　　#　3. 传参方式：
　　　　　　　#　1. 自己拼接为键值对
　　　　　　　#　2. 使用transformRequest，在请求发送前将请求数据进行转换
　　　　　　　#　3. 如果使用模块化开发，可以使用qs模块进行转换

'''1.server.php'''
<?php
    //获取参数
    $name=$_POST['name'];
    $age=$_POST['age'];

    //响应数据
    echo '姓名：',$name,',年龄：',$age;
?>

server.php

上一篇

iOS中的动态库和静态库的区别「建议收藏」

下一篇

vuex的mutations用法[亲测有效]

发表回复

相关推荐

苹果微信分身版ios_苹果ios微信分身三开助手

Vue中父组件以及子组件传值问题

ios KVO

关于vue3.x中的emits的用法

最新文章

更多>

苹果微信分身版ios_苹果ios微信分身三开助手

8小时前 2

ios KVO

22小时前 2

ogre3d 移植到ios平台

2个月前 21

IOS端K线系列之K线、OHLC线、分时线基础知识

2个月前 14

iOS程序依赖管理的工具——CocoaPods

2个月前 24

iOS程序依赖管理的工具——CocoaPods

2个月前 23

怎么通过Bios设置U盘启动项实现U盘启动？

2个月前 27

电脑装系统怎么进进BiOS，怎么修改启动项！

2个月前 26

讲真，这才是我想要的BIOS中英文对照！必须收藏

2个月前 29

联想主板bios设置u盘启动项的方法怎么操作

2个月前 25