axios

Promise based HTTP client for the browser and node.js

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

Browser Support

安裝 Axios Installing

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

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

C:\Users\Administrator>npm install axios + axios@0.24.0
updated 1 package and audited 2 packages in 1.754s
found 0 vulnerabilities

安裝之后：

axios發起GET請求
axios發起get請求的語法:

axios.get('ur1',{params:{/*參數*/}}).then(callback)

具體的請求示例如下:

//請求的URL地址
var url='http://www.liulongbin.top:3006/api/get'  
//請求的參數對象
var paramsobj={name:'zs',age:20}
//調用axios.get()發起GET請求
axios.get(url,{params:paramsobj}).then(function(res){
    //res.data 是服務器返回的數據
    var result=res.data
    console.log(res)
})

axios發起POST請求
axios發起post 請求的語法:

axios.post('ur1',{/*參數*/}).then(callback)

具體的請求示例如下:

//請求的_URL，地址
var url='http://www.liulongbin.top:3006/api/post'
//要提交到服務器的數據
var data0bj={location:'北京',address:'順義′}
//調用axios.post()發起POST請求
axios.post(url,dataobj).then(function(res){
    //res.data是服務器返回的數據
    var result=res.data
    console.log(result)
})

完整示例 （來自 https://gitee.com/haha_2020/vue_material/blob/master/axios%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html）：

下面的例子不用安裝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 在線地址 -->
    <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")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                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:"鹽焗西蘭花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

</html>

在瀏覽器里面開啟調試工具。

運行結果如下：

例子

Performing a GET request

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet
Explorer and older browsers, so use with caution.

Performing a POST request

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Performing multiple concurrent requests

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

REF

http://www.axios-js.com/docs/

https://gitee.com/haha_2020/vue_material/blob/master/axios%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html

視頻：

https://www.bilibili.com/video/BV1334y1d74f?p=120

https://www.bilibili.com/video/BV1334y1d74f?p=121

https://www.bilibili.com/video/BV1334y1d74f?p=122

https://www.bilibili.com/video/BV1334y1d74f?p=123

免責聲明！

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

猜您在找 axios基本用法 axios 的用法 axios基本用法 axios基本用法 axios的基本用法 axios基本用法 axios基本用法 axios基本用法 axios入門 axios的基本用法與並發請求