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入门基本使用方法
weixin_57379543的博客
03-23 1010
axios定义： 1. 基于Promise的http客户端，可以在浏览器和nodejs中运行 2. 在浏览器端借助axios可以发送ajax（XMLHttppRequests）请求，在nodejs中借助axios可以发送http请求 特点：连接请求和响应；对请求和相应数据做转化；取消请求；自动转化为json数据；保护阻挡XSR
axios入门
zlting_的博客
07-26 286
axios入门(笔记)
axios基础入门
dyk
08-15 886
axios基础入门json-server安装在当前文件下建立db.json启动 json-server结果 json-server JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。如果没有写后台返回数据可以用这个来模拟后台返回的数据 安装 npm install -g json-server 在当前文件下建立db.json { "result":{ "code":200, "msg"
axios入门笔记
三口酥屋
03-07 87
axios入门及源码分析
axios入门使用笔记
你好呀，很高兴你在看这里~
05-20 1667
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
Axios入门
qq_65850082的博客
07-21 202
Axios作为一个功能强大的HTTP客户端,不仅简化了网络请求的处理过程,还提供了丰富的高级特性。通过合理使用Axios的各种功能,我们可以更高效地处理前后端交互,提高开发效率和应用性能。在实际开发中,建议深入研究Axios的文档,以便更好地利用这个强大的工具。
axios入门与源码解析
my_future的博客
02-16 296
前后端交互axios第三方工具库使用讲解
vue axios入门
绝圣弃智-零的博客
12-26 650
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 一、安装 1、 利用npm安装...
axios入门实践
周红伟讲AI
03-22 818
axios入门实践 javascriptasyncaxios 更新于 2019-02-21约 19 分钟 一 前言 本文适合刚接触axios或者使用过几次的同学来分享交流一些入门经验，本文同样适用熟悉axios的同学来作为参考手册。 默认你已经看过axios的相关文档：axios文档GitHub，通过文档了解基础的使用之后，接下来你可以进入正文。 二 正文 axios = Aj...
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的基础知识，包括安装、基本用法以及一些高级特性。 首先，让我们深入...
Hutool——发送http请求案例
专注写bug
07-29 562
在实际开发过程中，微服务环境下往往采取openfeign实现服务与服务之间的请求调用。但有时候需要调用第三方API的情况，虽然在spring boot 框架中提供了请求模板，但这个不怎么好用。市面上支持http调用的框架技术很多，比如okhttp等。本篇文章重点说明Hutool给我们封装的请求方法类。/*** 调用post 接口发送get请求* @return。
深入解析 Jackson 的 @JsonProperty 注解
一起coding，一起嗨。
07-29 307
深入解析 Jackson 的 @JsonProperty 注解
PyCharm 常用 的插件
u013934107的博客
07-27 216
PyCharm 常用 的插件
微信小程序教程002：代码结构介绍和新建小程序页面
最新发布
WwLK123的博客
07-29 537
pages：小程序所有页面utils：存放工具性质的模块app.js：小程序项目的入口文件==（至关重要）==app.json：小程序项目的全局配置文件app.wxss：小程序项目的全局样式文件：项目的配置文件：用来配置小程序及其页面是否允许被微信索引WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。WXML和HTML的区别标签名称不同属性节点不同。
Vue基础入门到组件开发全指南
- 面向不同场景的网络请求库，如jQuery、fetch和axios的使用，以及拦截器的设置。 - 组件间的通信，包括父子组件间的值传递和ref的使用。 6. **Vue-cli**： - 熟悉单文件组件的开发流程，包括工具安装、项目创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值