axios（快速入门）

最新推荐文章于 2024-09-28 14:47:41 发布

修复bug

最新推荐文章于 2024-09-28 14:47:41 发布

阅读量441

点赞数

分类专栏： javascript 文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71349739/article/details/128860876

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章详细介绍了axios库的使用，包括其作为前端ajax请求库的地位、特点和常用语法。内容涵盖axios的GET、POST、PUT、DELETE等请求方法，以及拦截器、默认配置、取消请求等功能。此外，还探讨了axios的源码结构和请求响应流程。

摘要由CSDN通过智能技术生成

1、axios的理解和使用

1.1 axios的概述

1.前端最流行的ajax请求库

2.react、vue官方都推荐使用axios访问ajax请求

3.文档https://github.com/axios/axios

4.axios中文网axios中文网|axios API 中文文档 | axios (axios-js.com)

1.2 axios的特点

基于xhr + promise的异步ajax请求库

浏览器端/node端都可以使用

支持请求、响应拦截器

支持请求取消

请求、响应数据转换

批量发送多个请求

1.3 axios的常用语法

axios(config):通用/最本质的发任意类型请求的方式

axios(url[, config]):可以只指定url发get 请求

axios.request(config):等同于axios(config)

axios.get(url[, config]):发get请求

axios.delete(url[, config]):发delete请求

axios.post(url[, data, config]):发post请求

axios.put(url[, data, configl):发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():用来指定接收所有成功数据的回调函数的方法

axios基本使用

    //获取按钮
    const btns = document.querySelectorAll('button');

    //第一个
    btns[0].onclick = function () {
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'GET',
            //URL
            url: 'http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response);
        });
    }

    //添加一篇新的文章
    btns[1].onclick = function () {
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'POST',
            //URL
            url: 'http://localhost:3000/posts',
            //设置请求体
            data: {
                title: "今天天气不错, 还挺风和日丽的",
                author: "张三"
            }
        }).then(response => {
            console.log(response);
        });
    }

    //更新数据
    btns[2].onclick = function () {
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'PUT',
            //URL
            url: 'http://localhost:3000/posts/3',
            //设置请求体
            data: {
                title: "今天天气不错, 还挺风和日丽的",
                author: "李四"
            }
        }).then(response => {
            console.log(response);
        });
    }

    //删除数据
    btns[3].onclick = function () {
        //发送 AJAX 请求
        axios({
            //请求类型
            method: 'delete',
            //URL
            url: 'http://localhost:3000/posts/3',
        }).then(response => {
            console.log(response);
        });
    }

axios其他使用

//获取按钮
    const btns = document.querySelectorAll('button');

    //发送 GET 请求
    btns[0].onclick = function () {
        // axios()
        axios.request({
            method: 'GET',
            url: 'http://localhost:3000/comments'
        }).then(response => {
            console.log(response);
        })
    }

    //发送 POST 请求
    btns[1].onclick = function () {
        // axios()
        axios.post(
            'http://localhost:3000/comments',
            {
                "body": "喜大普奔",
                "postId": 2
            }).then(response => {
                console.log(response);
            })
    }

axios默认配置

    //获取按钮
    const btns = document.querySelectorAll('button');
    //默认配置
    axios.defaults.method = 'GET';//设置默认的请求类型为 GET
    axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
    axios.defaults.params = { id: 100 };
    axios.defaults.timeout = 3000;//

    btns[0].onclick = function () {
        axios({
            url: '/posts'
        }).then(response => {
            console.log(response);
        })
    }

1.4 难点语法的理解和使用

axios.create(config)

根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置

新axios 只是没有取消请求和批量发请求的方法，其它所有语法都是一致的

为什么要设计这个语法?

(1)需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一

样，如何处理

(2)解决:创建2个新axios，每个都有自己特有的配置，分别应用到不同要

求的接口请求中

拦截器函数/ajax请求/请求的回调函数的调用顺序

说明:调用axios()并不是立即发送ajax请求，而是需要经历一个较长的流程

流程:请求拦截器2=>请求拦截器1=>发ajax请求=>响应拦截器1=>响

应拦截器2=>请求的回调 (unshift,push)

注意:此流程是通过promise串连起来的，请求拦截器传递的是config，响应

拦截器传递的是response

代码：

    // Promise
    // 设置请求拦截器  config 配置对象
    axios.interceptors.request.use(function (config) {
        console.log('请求拦截器 成功 - 1号');
        //修改 config 中的参数
        config.params = { a: 100 };

        return config;
    }, function (error) {
        console.log('请求拦截器 失败 - 1号');
        return Promise.reject(error);
    });

    axios.interceptors.request.use(function (config) {
        console.log('请求拦截器 成功 - 2号');
        //修改 config 中的参数
        config.timeout = 2000;
        return config;
    }, function (error) {
        console.log('请求拦截器 失败 - 2号');
        return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器 成功 1号');
        return response.data;
        // return response;
    }, function (error) {
        console.log('响应拦截器 失败 1号')
        return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器 成功 2号')
        return response;
    }, function (error) {
        console.log('响应拦截器 失败 2号')
        return Promise.reject(error);
    });

    //发送请求
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts'
    }).then(response => {
        console.log('自定义回调处理成功的结果');
        console.log(response);
    });

取消请求

基本流程
配置cancelToken对象
缓存用于取消请求的cancel函数
在后面特定时机调用cancel函数取消请求
在错误回调中判断如果error是cancel，做相应处理

实现功能
点击按钮，取消某个正在请求中的请求

代码：

    //获取按钮
    const btns = document.querySelectorAll('button');
    //2.声明全局变量
    let cancel = null;
    //发送请求
    btns[0].onclick = function () {
        //检测上一次的请求是否已经完成
        if (cancel !== null) {
            //取消上一次的请求
            cancel();
        }
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts',
            //1. 添加配置对象的属性
            cancelToken: new axios.CancelToken(function (c) {
                //3. 将 c 的值赋值给 cancel
                cancel = c;
            })
        }).then(response => {
            console.log(response);
            //将 cancel 的值初始化
            cancel = null;
        })
    }

    //绑定第二个事件取消请求
    btns[1].onclick = function () {
        cancel();
    }