2022-11-14 12:58阅读: 22评论: 0推荐: 0

【Vue-06】Axios

axios

一、axios概述

axios作用：发送异步请求获取数据。常见的方法：get、post、put、delete；在发送的时候可以指定参数(地址、请求方式和请求头部信息)；返回数据结构(data、status、statusText、headers、config)

二、axios的基本使用

<!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的基本使用</title>
  
    <!--引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
    <div>
        <button id="get">发送GET请求</button>
        <button id="post">发送POST请求</button>
        <button id="put">发送PUT请求</button>
        <button id="delete">发送DELETE请求</button>
    </div>
    
    <script>
        // GET请求--获取id为2的数据
        const btn_get = document.getElementById("get");
        
        btn_get.onclick = function() {
            axios({
                // 请求类型
                method: 'GET',
                // URL
                url: 'http://localhost:3000/posts/2',
            }).then(response => {
                console.log(response);
            })
        }

        // POST请求--增加一条数据，需要有请求体
        const btn_post = document.getElementById("post");
        btn_post.onclick = function() {
            axios({
                // 请求类型
                method: 'POST',
                // 请求的URL
                url: 'http://localhost:3000/posts',
                // 设置请求体
                data: {
                    title: '今天天气不错',
                    author: 'admin'
                }
            }).then(response => {
                console.log(response);
            })
        }

        // PUT请求---更新id为3的数据
        const btn_put = document.getElementById("put");
        btn_put.onclick = function() {
            axios({
                // 请求类型
                method: 'PUT',
                // URL
                url: 'http://localhost:3000/posts/1',
                // 设置请求体
                data: {
                    title: '今天天气不错-更新',
                    author: '李四-更新'
                }
            }).then(response=>{
                console.log(response);
            })
        }

        // DELETE请求---删除id为3的数据
        const btn_delete = document.getElementById("delete");
        btn_delete.onclick = function() {
            axios({
                method: 'delete',
                url: 'http://localhost:3000/posts/1',
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>
</html>

三、axios其他方式发送请求(常用)

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)，config是配置对象。
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

<!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发送其他请求</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
    <div>
        <button id="get">发送GET请求</button>
        <button id="post">发送POST请求</button>
        <button id="put">发送PUT请求</button>
        <button id="delete">发送DELETE请求</button>
    </div>

    <script>
        // 获取按钮
        const btn_get = document.getElementById("get");
        
        // 给按钮绑定点击事件，发送get请求
        btn_get.onclick = function() {
            // axios.request(config)
            axios.request({
                method: 'GET',
                url: 'http://localhost:3000/comments'
            }).then(response =>{
                console.log(response);
            })
        }
        
        // 发送POST请求
        const btn_post = document.getElementById("post");

        btn_post.onclick = function() {
            // axios.post()
            axios.post(
                'http://localhost:3000/comments',
                {
                    "body": "喜大普奔",
                    "postId": 2
                }
            ).then(response =>{
                console.log(response);
            })
        }
    </script>
</body>
</html>

四、axios请求响应结果的结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

五、axios配置对象config(常用)

即axios在调用时，那个参数对象config。

这些是创建请求时可以用的配置选项。只有url时必须的。如果没有指定method，请求将默认使用get方法。

url
baseURL
method
data

六、axios的默认配置

<script>
    // 获取按钮
    const btn_get = document.getElementById("get");
	
    // 设置默认的配置
    axios.defaults.method = 'GET'; //设置默认的请求类型为GET
    axios.defaults.baseURL = 'http://localhost:3000/'; //设置基础URL
    
    // 给按钮绑定点击事件，发送get请求
    btn_get.onclick = function() {
        // axios.request(config)
        axios.request({
            url: 'comments'
        }).then(response =>{
            console.log(response);
        })
    }
</script>