axios

最新推荐文章于 2024-02-25 14:43:46 发布
最新推荐文章于 2024-02-25 14:43:46 发布
阅读量678 收藏 1
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53943447/article/details/131001437
版权

1. axios

  1. 什么是axios？
    axios是 前端最流行的 ajax 请求库
    react/vue 官方都推荐使用 axios 发 ajax 请求
  2. axios特点？
    （1）基于 xhr + promise 的异步 ajax 请求库
    （2）浏览器端/node 端都可以使用
    （3）支持请求／响应拦截器
    （4）支持请求取消
    （5）请求/响应数据转换
    （6）批量发送多个请求

1. 1 axios基本使用

  • 发送GET请求
//获取按钮 GET请求
        const btns = document.querySelectorAll('button')
        // 第一个
        btns[0].oncilck = function () {
            // 发送AJAX请求
            axios({
                // 请求类型
                method: 'GET',
                // URL
                url: 'http://localhost:3000/posts/2',
            }).then(response => {
                console.log(response
                );
            })
        }
  • 发送POST请求
//添加一篇新的文章 POST请求
        btns[1].oncilck = function () {
            // 发送AJAX请求
            axios({
                // 请求类型
                method: 'POST',
                // URL
                url: 'http://localhost:3000/posts',
                // 设置请求体
                data: {
                    title: '今天天气不错',
                    author: '张三'
                }
            }).then(response => {
                console.log(response);
            })
        }
  • 发送PUT请求
// PUT请求
        btns[2].oncilck = function () {
            // 发送AJAX请求
            axios({
                // 请求类型
                method: 'PUT',
                // URL
                url: 'http://localhost:3000/posts/3',
                // 设置请求体
                data: {
                    title: '今天天气不错',
                    author: '李四'
                }
            }).then(response => {
                console.log(response);
            })
        }
  • 发送DELETE请求
// 删除数据
        btns[3].oncilck = function () {
            // 发送AJAX请求
            axios({
                // 请求类型
                method: 'PUT',
                // URL
                url: 'http://localhost:3000/posts/3',
            }).then(response => {
                console.log(response);
            })
        }

1.2 axios其他请求方式

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

1.3 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].oncilck = function () {
            // 发送AJAX请求
            axios({
                // URL
                url: '/posts/2',
            }).then(response => {
                console.log(response
                );
            })
        }

1.4 axios创建实例对象

const btns = document.querySelectorAll('button')

        // 创建实例对象
        const duanzi = axios.create({
            baseURL: 'https://api.apiopen.top',
            timeout:2000
        });
        // 这里 duanzi 与 axios 对象的功能几近是一样的
        // duanzi({
        //     url: '/getJoke',
        // }).then(response => {
        //     console.log(response);
        // })

        duanzi.get('/getJoke').then(response => {
            console.log(response.data);
        })

1.5 axios拦截器

 // Promise
        // 设置请求拦截器
        axios.interceptors.request.use(function(config){
            console.log('请求拦截器成功');
            return config;
        }, function(error) {
            console.log('请求拦截器失败');
            return Promise.reject(error)
        });

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

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

1.6 axios取消请求

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

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

1.7 axios源码分析

#为注释
├── /dist/ # 项目输出目录
├── /lib/ # 项目源码目录
│ ├── /adapters/ # 定义请求的适配器 xhr、http
│ │ ├── http.js # 实现 http 适配器(包装 http 包)
│ │ └── xhr.js # 实现 xhr 适配器(包装 xhr 对象)
│ ├── /cancel/ # 定义取消功能
│ ├── /core/ # 一些核心功能
│ │ ├── Axios.js # axios 的核心主类
│ │ ├── dispatchRequest.js # 用来调用 http 请求适配器方法发送请求的函数
│ │ ├── InterceptorManager.js # 拦截器的管理器
│ │ └── settle.js # 根据 http 响应状态，改变 Promise 的状态
│ ├── /helpers/ # 一些辅助方法
│ ├── axios.js # 对外暴露接口
│ ├── defaults.js # axios 的默认配置
│ └── utils.js # 公用工具
├── package.json # 项目信息
├── index.d.ts # 配置 TypeScript 的声明文件
└── index.js # 入口文件

  • axios发送请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> axios 的由来</title>
    <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
    <script>
        // console.log(axios);
        // axios();
        // axios.get();
        // axios.post();

        //构造函数
        function Axios(config){
            //初始化
            this.defaults = config;//为了创建 default 默认属性
            this.intercepters = {
                request: {},
                response: {}
            }
        }
        //原型添加相关的方法
        Axios.prototype.request = function(config){
            console.log('发送 AJAX 请求 请求的类型为 '+ config.method);
        }
        Axios.prototype.get = function(config){
            return this.request({method: 'GET'});
        }
        Axios.prototype.post = function(config){
            return this.request({method: 'POST'});
        }

        //声明函数
        function createInstance(config){
            //实例化一个对象
            let context = new Axios(config);// context.get()  context.post()  但是不能当做函数使用 context() X
            //创建请求函数
            let instance = Axios.prototype.request.bind(context);// instance 是一个函数 并且可以 instance({})  此时 instance 不能 instance.get X
            //将 Axios.prototype 对象中的方法添加到instance函数对象中
            Object.keys(Axios.prototype).forEach(key => {
                instance[key] = Axios.prototype[key].bind(context);// this.default  this.interceptors
            });
            //为 instance 函数对象添加属性 default 与 interceptors
            Object.keys(context).forEach(key => {
                instance[key] = context[key];
            });
            return instance;
        }

        let axios = createInstance();
        //发送请求
        // axios({method:'POST'});
        axios.get({});
        axios.post({});




    </script>
</body>
</html>
  • axios请求发送
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求发送过程</title>
    <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
    <script>
        // axios 发送请求   axios  Axios.prototype.request  bind
        //1. 声明构造函数
        function Axios(config){
            this.config = config;
        }
        Axios.prototype.request = function(config){
            //发送请求
            //创建一个 promise 对象
            let promise = Promise.resolve(config);
            //声明一个数组
            let chains = [dispatchRequest, undefined];// undefined 占位
            //调用 then 方法指定回调
            let result = promise.then(chains[0], chains[1]);
            //返回 promise 的结果
            return result;
        }

        //2. dispatchRequest 函数
        function dispatchRequest(config){
            //调用适配器发送请求
            return xhrAdapter(config).then(response => {
                //响应的结果进行转换处理
                //....
                return response;
            }, error => {
                throw error;
            });
        }

        //3. adapter 适配器
        function xhrAdapter(config){
            console.log('xhrAdapter 函数执行');
            return new Promise((resolve, reject) => {
                //发送 AJAX 请求
                let xhr = new XMLHttpRequest();
                //初始化
                xhr.open(config.method, config.url);
                //发送
                xhr.send();
                //绑定事件
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功的条件
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的状态
                            resolve({
                                //配置对象
                                config: config,
                                //响应体
                                data: xhr.response,
                                //响应头
                                headers: xhr.getAllResponseHeaders(), //字符串  parseHeaders
                                // xhr 请求对象
                                request: xhr,
                                //响应状态码
                                status: xhr.status,
                                //响应状态字符串
                                statusText: xhr.statusText
                            });
                        }else{
                            //失败的状态
                            reject(new Error('请求失败 失败的状态码为' + xhr.status));
                        }
                    }
                }
            });
        }


        //4. 创建 axios 函数
        let axios = Axios.prototype.request.bind(null);
        axios({
            method:'GET',
            url:'http://localhost:3000/posts'
        }).then(response => {
            console.log(response);
        });
    </script>
</body>
</html>
  • axios拦截器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拦截器</title>
    <script src="./node_modules/axios/dist/mine-axios.js"></script>
</head>
<body>
    <script>
        console.dir(axios);
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function one(config) {
            console.log('请求拦截器 成功 - 1号');
            return config;
        }, function one(error) {
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function two(config) {
            console.log('请求拦截器 成功 - 2号');
            return config;
        }, function two(error) {
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 1号');
            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(response);
        });
    </script>
</body>
</html>
  • axios拦截器模拟实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拦截器</title>
    <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
    <script>
        //构造函数
        function Axios(config){
            this.config = config;
            this.interceptors = {
                request: new InterceptorManager(),
                response: new InterceptorManager(),
            }
        }
        //发送请求  难点与重点
        Axios.prototype.request = function(config){
            //创建一个 promise 对象
            let promise = Promise.resolve(config);
            //创建一个数组
            const chains = [dispatchRequest, undefined];
            //处理拦截器
            //请求拦截器 将请求拦截器的回调 压入到 chains 的前面  request.handles = []
            this.interceptors.request.handlers.forEach(item => {
                chains.unshift(item.fulfilled, item.rejected);
            });
            //响应拦截器
            this.interceptors.response.handlers.forEach(item => {
                chains.push(item.fulfilled, item.rejected);
            });

            // console.log(chains);
            //遍历
            while(chains.length > 0){
                promise = promise.then(chains.shift(), chains.shift());
            }

            return promise;
        }

        //发送请求
        function dispatchRequest(config){
            //返回一个promise 队形
            return new Promise((resolve, reject) => {
                resolve({
                    status: 200,
                    statusText: 'OK'
                });
            });
        }
       
        //创建实例
        let context = new Axios({});
        //创建axios函数
        let axios = Axios.prototype.request.bind(context);
        //将 context 属性 config interceptors 添加至 axios 函数对象身上
        Object.keys(context).forEach(key => {
            axios[key] = context[key];
        });

        //拦截器管理器构造函数
        function InterceptorManager(){
            this.handlers = [];
        }
        InterceptorManager.prototype.use = function(fulfilled, rejected){
            this.handlers.push({
                fulfilled,
                rejected
            })
        }


        //以下为功能测试代码
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function one(config) {
            console.log('请求拦截器 成功 - 1号');
            return config;
        }, function one(error) {
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function two(config) {
            console.log('请求拦截器 成功 - 2号');
            return config;
        }, function two(error) {
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 1号');
            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(response);
        });
    </script>
</body>
</html>
  • axios请求取消
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./node_modules/axios/dist/mine-axios.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning"> 取消请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel !== null){
                //取消上一次的请求
                cancel();
            }

            //创建 cancelToken 的值
            let cancelToken = new axios.CancelToken(
                function(c){
                    //3. 将 c 的值赋值给 cancel
                    cancel = c;
                });

            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1. 添加配置对象的属性
                cancelToken: cancelToken
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function(){
            cancel();
        }
    </script>   
</body>
</html>
  • axios请求取消模拟实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning"> 取消请求 </button>
    </div>
    <script>
        //构造函数
        function Axios(config){
            this.config = config;
        }
        //原型 request 方法
        Axios.prototype.request = function(config){
            return dispatchRequest(config);
        }
        //dispatchRequest 函数
        function dispatchRequest(config){
            return xhrAdapter(config);
        }
        //xhrAdapter
        function xhrAdapter(config){
            //发送 AJAX 请求
            return new Promise((resolve, reject) => {
                //实例化对象
                const xhr = new XMLHttpRequest();
                //初始化
                xhr.open(config.method, config.url);
                //发送
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断结果
                        if(xhr.status >= 200 && xhr.status < 300){
                            //设置为成功的状态
                            resolve({
                                status: xhr.status,
                                statusText: xhr.statusText
                            });
                        }else{
                            reject(new Error('请求失败'));
                        }
                    }
                }
                //关于取消请求的处理
                if(config.cancelToken){
                    //对 cancelToken 对象身上的 promise 对象指定成功的回调
                    config.cancelToken.promise.then(value => {
                        xhr.abort();
                        //将整体结果设置为失败
                        reject(new Error('请求已经被取消'))
                    });
                }
            })
        }

        //创建 axios 函数
        const context = new Axios({});
        const axios = Axios.prototype.request.bind(context);

        //CancelToken 构造函数
        function CancelToken(executor){
            //声明一个变量
            var resolvePromise;
            //为实例对象添加属性
            this.promise = new Promise((resolve) => {
                //将 resolve 赋值给 resolvePromise
                resolvePromise = resolve
            });
            //调用 executor 函数
            executor(function(){
                //执行 resolvePromise 函数
                resolvePromise();
            });
        }

        //获取按钮 以上为模拟实现的代码
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel !== null){
                //取消上一次的请求
                cancel();
            }

            //创建 cancelToken 的值
            let cancelToken = new CancelToken(function(c){
                cancel = c;
            });

            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1. 添加配置对象的属性
                cancelToken: cancelToken
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

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

1.8 axios 与 Axios 的关系 ?

  1. 从语法上来说: axios 不是 Axios 的实例
  2. 从功能上来说: axios 是 Axios 的实例
  3. axios 是 Axios.prototype.request 函数 bind()返回的函数
  4. axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性
赖皮.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios：基本使用、常用配置项、create方法、请求和响应拦截器、取消请求
weixin_42044763的博客
01-05 4883
一般来说，我们都会省略then的失败回调，所有的错误都在响应拦截器中捕获，做法就是在响应拦截器失败的回调中进行错误提示，并返回一个pending状态的Promise，这样的话我们使用async/await就不用包try-catch了，then也就不用指定失败的回调了。当请求结束后，如果请求成功，就会走第一个回调，然后再走then中成功的回调，所以这里的返回值就是Promise成功的值；是得到响应之后执行的一组回调函数，若请求成功，对成功的数据（成功Promise的结果值）进行处理；一般来说只有一个回调。
axios-0.19.2.zip
08-27
这个"axios-0.19.2.zip"文件包含的是Axios库的一个特定版本——0.19.2的压缩包。在这个版本中，核心功能是通过"axios.min.js"文件提供的，这是一个优化过的、轻量级的JavaScript文件，适用于生产环境。 Axios 是...
axios params
我是张先生
12-30 1435
params 里面传的参数， 外面需要加 双引号， 把它变成字符串才可以正确传参
axios.create()
JEFF_xieyuzhi的博客
11-28 2万+
<!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...
axios创建新的实例
Teamig的博客
12-03 1913
对于不同的请求接口，需要传的请求头不同或者请求域名不同，此时需要一个新的axios实例进行请求 1.创建新的js文件 import axios from 'axios' const instance = axios.create({ baseURL: 'https://portrayal.71baomu.com/', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); export default i
创建对应的axios 实例
weixin_51614564的博客
09-02 490
1.axios.create() 创建对应的axios 的实例。2.在这个实例中添加对映的baseURL。
vue新建axios实例
qq_34638435的博客
08-08 4496
使用springboot+vue前后端分离，经常会出现跨域调用不同服务的接口，vue处理需要处理跨域的问题外还需要配置多数据源多服务的请求路径。 参考博文：https://www.cnblogs.com/morang/p/8424032.html...
axios 面向对象封装
03-22
标题“axios 面向对象封装”表明我们将创建一个自定义的 Axios 实例，它可以作为一个独立的对象在多个模块或组件之间复用。这种封装通常包括创建一个构造函数，用于初始化配置，以及定义一些方法，如发送GET、POST等...
Axios
02-17
Axios研究 使用json服务器-npm我json服务器-g 创建db.json 在db.json文件下启动服务器-json-server --watch db.json 您可以浏览 Axios演示研究了axios如何在浏览器端和nodejs端工作，这意味着axios不仅可以在...
axios直接导入使用的压缩包
07-17
引入后，Axios 将全局暴露为 `axios` 对象，可以在 JavaScript 代码中直接使用。 2. **发起请求**: Axios 提供了简单易用的接口来发起各种 HTTP 请求，如 GET、POST、PUT、DELETE 等。例如，发起一个 GET 请求： ...
Error：in ./node-modules/axios/lib/platform/index.js
12-22
在JavaScript的开发环境中，我们经常会遇到各种错误，其中之一就是“Error in ./node_modules/axios/lib/platform/index.js”。这个错误提示通常意味着在项目中使用axios库时遇到了问题。Axios是一款非常流行的基于...
axios.min.js
12-30
vue使用请求数据axios下载axios.js源文件
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
axios-1.0.0-alpha.1中的axios.main.js
07-21
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 ...
【鸿蒙版axios请求封装包】
最新发布
06-03
因此，"鸿蒙版axios请求封装包"是为了满足开发者在HarmonyOS环境下使用类似`axios`的API进行网络请求的需求而创建的。 这个封装包的目标是将`axios`的功能与HarmonyOS的特性相结合，提供一套简洁、高效且易于使用的...
axios的实例创建与应用
qq_43750656的博客
01-12 2581
一、使用axios发送Ajax请求 <!--引入axios，就好比引入jquery一样--> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> //使用axios发送一个简单的http请求 axios.get(url) .then(response => { //ajax请求执
axios自定义生成
comelinux的博客
02-25 416
【代码】axios自定义生成。
axios.create的使用
weixin_43222587的博客
04-13 1万+
axios.create()是添加了自定义配置的新的axios 1.用axios发送请求 axios({ method:'POST', url:'http://localhost:8080/login', data }) 2.用axios.create创建一个新的axios发请求 cosnt instance = axios.create({ baseURL:'http://localhost:8080/' //基础路径 }) instance({ url: '/login',
axios 的理解和使用 axios.create(对axios请求进行二次封装) 拦截器 取消请求(axios.CancelToken)
热门推荐
weixin_42448623的博客
03-10 4万+
目录axios是什么axios特点axios常用语法axios安装axios简单使用默认get请求postputdeleteaxios难点语法axios.create(config) 对axios请求进行二次封装axios的处理链流程 拦截器拦截器简单使用多个拦截器取消请求1. 基本流程2. 实现功能在 请求拦截器里面统一添加取消请求在 响应拦截器里面统一添加 处理取消请求代码简化 实现上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值