axios入门基础

已于 2023-02-27 17:50:29 修改
阅读量1.8k 收藏 4
点赞数 1
分类专栏： JS 文章标签： json
于 2022-03-11 21:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41325924/article/details/123397370
版权

一、初识axios

1.使用json-server的介绍与服务搭建

  1. 在线文档: https://github.com/typicode/json-server
  2. axios中文文档
  3. 下载: npm install -g json-server
  4. 目标根目录下创建数据库 json 文件: db.json
{
	"posts": [
		{ "id": 1, "title": "json-server", "author": "typicode" },
		{ "id": 2, "title": "json-server2", "author": "typicode" }
	],
	"comments": [
		{ "id": 1, "body": "some comment", "postId": 1 }
	],
	"profile": { "name": "typicode" }
}

4. 启动服务器执行命令: json-server --watch db.json

5.使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1
http://localhost:3000/posts/2

2.使用axios 基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        const btn = document.querySelectorAll('button');
        //GET
        btn[0].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method:'GET',
                //URL
                url:'http://localhost:3000/posts/2'
            }).then(value=>{
                console.log(value);
            })
        }

        //POST
        //发送一篇新的文章
        btn[1].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method:'POST',
                //URL
                url:'http://localhost:3000/posts',
                //设置请求体
                data:{
                    title:'今天天气风和日丽',
                    author:'离歌笑',
                }
            }).then(value=>{
                console.log(value);;
            })
        }

        //更新数据
        //发送PUT请求
        btn[2].onclick = function(){
            axios({
                //请求类型
                method:'PUT',
                //Url
                url:'http://localhost:3000/posts/2',
                //设置请求体
                data:{
                    title:'三离三合',
                    author:'赵灵儿',
                }
            }).then(value=>{
                console.log(value);
            })
        }

        //DELETE 删除数据
        btn[3].onclick = function(){
            axios({
                //请求类型
                method:'delete',
                //Url
                url:'http://localhost:3000/posts/3',
                //设置请求体
            }).then(value=>{
            console.log(value);
            })
        }
    </script>
</body>
</html>

3.axios的其他使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios其他使用</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">其他使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

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

        //发送POST请求
        btns[1].onclick = function(){
            //axios()
            axios.post('http://localhost:3000/comments',{
                body:'行如止水',
                postId:2
            }).then(value=>{
                console.log(value);
            })
        }

        //更新数据
        //发送PUT请求
        btns[2].onclick = function(){
            //axios()
            axios.put('http://localhost:3000/comments/2',{
                body:'心无旁骛AS',
            }).then(value=>{
                console.log(value);
            })
        }

        //删除数据
        btns[3].onclick = function(){
            //axios
            axios.delete('http://localhost:3000/comments/3').then(value=>{})
        }
    </script>
</body>
</html>

4.axios的默认配置

axios.defualts.xxx

//获取按钮
const btns = document.querySelectorAll('button');
axios.defaults.methods ='GET';//设置默认请求的类型为GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};//设置参数
axios.defaults.timeout = 300;//设置时间
//默认配置
btns[0].onclick = function(){
    axios({
        url:'/post'
    }).then(resppnse=>{
        console.log(resppnse);
    })
}

二、axios 的理解和使用

1. axios 是什么?

    前端最流行的 ajax请求库
    react/vue 官方都推荐使用 axios 发ajax 请求
    文档: https://github.com/axios/axios

2. axios 特点

    基于 xhr + promise 的异步 ajax请求库
    浏览器端/node 端都可以使用
    支持请求／响应拦截器
    支持请求取消
    请求/响应数据转换
    批量发送多个请求

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, config]): 发put 请求

axios.defaults.xxx: 请求的默认全局配置（method\baseURL\params\timeout…）
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

 

 4.难点语法的理解和使用

axios.create(config)

 根据指定配置创建一个新的 axios, 也就是每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理（比如有多个baseURL需要指定）
(2) 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

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

//创建实例对象  /getJoke
const duanzi = axios.create({
    baseURL:'https://api.apiopen.top',
    timeout:2000
})

const another= axios.create({
    baseURL:'http:/b.com',
    timeout:3000
})
//这里的duanzi与axios对象的功能几乎是一样的

duanzi({
    url:'/getJoke',
}).then(response=>{
    console.log(response);
})

duanzi.post('/getJoke').then(resopnse=>{
    console.log(resopnse);
})

5.axios拦截器

说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程
流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response

// 设置请求拦截器 config 配置对象
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器成功 1号');
    //修改config中的参数
    config.params= {id:500}
    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;
    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({
    mothods:'GET',
    url:'http://localhost:3000/posts',
    params:{id:20}
}).then(response=>{
    console.log('自定义回调成功处理');
    console.log(response);
})
.catch(reason=>{
    console.log('自定义失败回调');
})

 6.取消请求

基本流程

  1. 配置 cancelToken 对象
  2. 缓存用于取消请求的 cancel 函数
  3. 在后面特定时机调用 cancel 函数取消请求
  4. 在错误回调中判断如果 error 是 cancel, 做相应处理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.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');
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次请求是否已经完成
            if(cancel!==null)
            {
                cancel();
            }
            axios({
                methods:'get',
                url:'http://localhost:3000/posts',
                //1.添加配置对象的属性
                cancelToken:new axios.CancelToken(function(c){
                    cancel = c;
                })
            }).then(response=>{
                console.log(response);
                cancel = null;
            })
        }
        btns[1].onclick =  function(){
            cancel();
        }
    </script>   
</body>
</html>

彼岸~流觞
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios快速入门
qq_62377885的博客
04-06 1432
get：获取数据，请求指定的信息，返回实体对象post：向指定资源提交数据（例如表单提交或文件上传）put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新delete：请求服务器删除指定的数据。
axios入门
zlting_的博客
07-26 284
axios入门(笔记)
Axios的使用教程
最新发布
m0_46319477的博客
04-28 684
Axios，在服务端它使用原生 node.js模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。网络请求库，作用于node.js。Axios 是一个基于。
axios教程
lllcuigu的博客
10-09 210
);​。
axios的详细讲解
热门推荐
whl0071的专栏
08-31 2万+
axios的详细讲解 es6三方库
axios基础语法，从小白到入门
01-27
本文将深入探讨Axios的基础语法，帮助初学者快速入门。 首先，我们来了解一下什么是Promise。Promise是ES6引入的一种处理异步操作的新方法，它可以更有效地管理和控制异步流程，避免了回调地狱的问题。Axios充分...
axios基本入门用法教程
08-31
- `baseURL`：所有请求的基础 URL，如果 URL 是相对路径，将会与 `baseURL` 合并。 - `transformRequest`：在请求发送之前处理数据的函数数组。 - `transformResponse`：在响应数据返回之前处理数据的函数数组。 - `...
最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar
11-07
这个“最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar”压缩包包含了对 Axios 的基础教程和其内部文件结构的解析，旨在帮助初学者更好地理解和使用 Axios。 1. Axios 基础概念： Axios 是...
最新版axios入门教程——15.15-axios发送请求过程详解(Av756328321,P15).rar
11-07
这篇最新的 Axios 入门教程深入讲解了 Axios 发送请求的过程，旨在帮助初学者快速掌握这一强大的工具。 首先，我们了解 Axios 的基本用法。在 JavaScript 中，你可以通过 `import` 或 `require` 来引入 Axios。例如...
最新版axios入门教程——1.01-课程介绍(Av756328321,P1).rar
11-07
这个“最新版axios入门教程——1.01-课程介绍(Av756328321,P1)”可能是为了帮助初学者快速掌握如何使用axios进行Web开发。课程可能涵盖了axios的基础知识，包括安装、基本用法以及一些高级特性。 首先，让我们深入...
axios的详细使用
精通前端技术，了解后端接口
03-09 1000
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它支持Promise API，能拦截请求和响应，转换请求和响应数据，取消请求，自动转换JSON数据，客户端支持防御XSRF等特性。axios作为现代前端开发的HTTP客户端王者，以其易用性、功能丰富和社区支持赢得了广大开发者的青睐。通过本文的介绍，相信你对axios的基本用法和高级特性有了更深入的了解。在未来的前端开发中，不妨尝试使用axios来优化你的HTTP请求处理流程，提升应用的性能和用户体验。
vue项目---axios使用教程及封装
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
02-23 2031
最近在写demo练手，记录一下自己在项目中对axios的使用，如有不恰当的地方欢迎指正；
3. axios
UnityAlvin
04-16 167
一、axios入门 1、axios的作用 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 官方网站：http://www.axios-js.com 2、axios应用案例 step1：mybatis-plus中添加后端接口 pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp
axios 使用入门
weixin_49928707的博客
10-25 2723
axios 使用入门 阅读目录 一、前言# 二、干货合集# 　　1、加载# 　　2、get & post# 　　3、拦截器# 三、总结# 一、前言 在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，无法抛弃 Jquery 的重要理由，除了优秀的前端 DOM 元素操作性以外，能够非常便捷的发起 http 请求也占有非常重要的地位。 既然我们已经开始使用 Vue 进行前端开发，抛弃了对页面 DOM 元素的操作，难道，为了方便的发起 http 请求，还需要在项目中加载 j
Axios基础使用以及api的深入理解
qq_52569656的博客
03-07 1531
本文主要是介绍前端开发过程中对于Axios的基础使用以及并且了解其axios的源码实现后手写部分axios内置api方法加深对其理解；阅读本文你能够了解到为什么在使用Axios发送请求时：我们能够通过函数调用的方式又或是函数对象的方式指定请求方式便捷的发起请求；请求拦截器和响应拦截器的执行顺序原理等
vue发送ajax --axios入门介绍
string_user_get_set的博客
08-12 1044
vue是不支持发送ajax请求的，所以需要借助axios来完成这个工作。 axios下载地址：https://github.com/mzabriskie/axios 基本用法： axios([options]); axios.get(url，[options]);  //get方式传递参数是用过url传递 axios.post(url,data,[options]);  //po
Axios基础
zxer123的博客
09-07 107
Axios基础axios特性Axios用在什么场景？axios实现 axios特性 1、可以在浏览器中发送 XMLHttpRequests 2、可以在 node.js 发送 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据 6、能够取消请求 7、自动转换 JSON 数据 8、客户端支持保护安全免受 XSRF 攻击 Axios用在什么场景？ 1.浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axio

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值