axios 入门、基本用法

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