axios 安裝與操作

本文轉載自查看原文 2020-09-28 20:32 3356 Vue

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

3.axios安裝

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

## 2. 下載后即到 C:\Users\tom\node_modules\axios\dist  路徑下找到 axios.min.js 文件

4.axios基本用法

4.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請求參數

4.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請求參數

2、axios借助Qs對提交數據進行序列化

　　　　　　axios參考博客：https://www.jianshu.com/p/68d81da4e1ad

　　　　 https://www.cnblogs.com/yiyi17/p/9409249.html

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 axios常用操作 ThinkPHP6.0 + Vue + ElementUI + axios 的環境安裝到實現 CURD 操作！ Vue3安裝axios vue Cli 安裝axios vue-axios + axios 入坑基礎安裝 Axios npm 安裝axios和使用增刪改查 [Vue3.0]安裝Ajax庫 axios vuejs axios安裝配置與使用 vue-cli3.0和element-ui及axios的安裝使用