axios笔记(二) 深入了解axios

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量273 收藏 1
点赞数 2
分类专栏： axios 文章标签： javascript axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chilanzi/article/details/123215331
版权

axios笔记(二) 深入了解axios

1. 介绍

  • 前端最流行的ajax请求库
  • react / vue官方推荐使用axios发送ajax请求
  • axios仓库

2. axios特点

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

3. axios常用语法

  • axios(config)：最本质的能发任何类型请求的方式

  • axios.get(url, config)：发get请求

  • axios.put(url, config)：发put请求

  • axios.defaults.xxx：请求的默认全局配置，如baseURL

  • axios.interceptors.request.use()：添加请求拦截器

  • axios.interceptors.response.use()：添加响应拦截器

  • axios.create(config)：新建一个 axios 实例(没有以下的功能)

  • axios.Cancel()：用于创建取消请求的错误对象

  • axios.CancelToken()：用于创建取消请求的token对象

  • axios.isCancel()：判断是否是一个取消请求的错误

  • axios.all(promises)：用于批量执行多个异步错误

3.1 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>Document</title>
</head>

<body>
  <button onclick="testGet()">GET请求</button>
  <button onclick="testPost()">POST请求</button>

  <script src="./node_modules/axios/dist/axios.min.js"></script>

  <script>
    axios.defaults.baseURL = 'http://localhost:3000' // 设置请求的基址,后面就不需要写完整的路径了

    // GET请求: 服务端获取数据
    const testGet = () => {
      axios({
          url: '/posts',
          method: 'GET',
          params: {
            id: 1
          }
        })
        .then(response => {
            console.log(response)
          },
          error => {
            alert(error.message)
          })
    }

    // POST请求: 服务端增加数据
    const testPost = () => {
      axios({
          url: '/posts',
          method: 'POST',
          data: {
            title: 'axios',
            author: 'clz'
          }
        })
        .then(response => {
            console.log(response)
          },
          error => {
            alert(error.message)
          })
    }
  </script>
</body>

</html>

3.2 axios.create(config)

简单使用

const instance1 = axios.create({
  baseURL: 'http://localhost:3000'
})

// 使用instance发送请求
instance1({
  url: '/posts'
})

可以发现用法和axios()很像，和下面一样效果

axios.defaults.baseURL = 'http://localhost:3000'
axios({
  url: '/posts'
})

那么，axios.create(config)肯定得有它的过人之处，否则，早就会被淘汰掉了。

先来一个情景：我们要向端口3000发送get请求，要向端口4000发送post请求

通过axios.create(config)实现：

const instance1 = axios.create({
  baseURL: 'http://localhost:3000'
})

// 使用instance发送请求
instance1({
  url: '/posts'
})

const instance2 = axios.create({
  baseURL: 'http://localhost:4000'
})

// 使用instance发送请求
instance2({
  url: '/posts',
  method: 'POST'
})

直接通过axios()实现：

axios.defaults.baseURL = 'http://localhost:3000'
axios({
  url: '/posts'
})

axios.defaults.baseURL = 'http://localhost:4000'
axios({
  url: '/posts',
  method: 'POST'
})

可能有人会提出疑问：不是一样都能实现吗？但是，如果我需要最后在向端口3000再发送一次GET请求的话。

让我们再看一下代码：

通过axios.create(config)实现：

const instance1 = axios.create({
  baseURL: 'http://localhost:3000'
})

instance1({
  url: '/posts'
})

const instance2 = axios.create({
  baseURL: 'http://localhost:4000'
})

instance2({
  url: '/posts',
  method: 'POST'
})

instance1({
  url: '/posts'
})

直接通过axios()实现：

axios.defaults.baseURL = 'http://localhost:3000'
axios({
  url: '/posts'
})

axios.defaults.baseURL = 'http://localhost:4000'
axios({
  url: '/posts',
  method: 'POST'
})

axios.defaults.baseURL = 'http://localhost:3000'
axios({
  url: '/posts'
})

比较上面的两种情况，就能发现**axios.create(config)**的好处了。因为是新建axios实例，所以3000和4000两个端口分别使用的是不同的axios实例。所以能够很好地各司其责。而axios()则不能，仅仅只是简单地修改baseURL，都需要每次发送请求前重新修改，还是未考虑异步的情况。这么一看，在这种情况下，**axios.create()**新建axios实例还是很香的。

3.3 拦截器及运行流程

3.3.1 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;			// 用于把任务串联起来
}, function (error) {
  // Do something with request error
  return Promise.reject(error);		// 一定要返回错误，不让之后能进入成功的流程
});
3.3.2 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });
3.3.3 拦截器简单使用
<!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>拦截器简单使用</title>
</head>

<body>
  <script src="./node_modules/axios/dist/axios.min.js"></script>
  <script>
    // 添加请求拦截器(回调函数，成功的必须返回config：用于把任务串联起来)
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor1 onResolved()')
        return config
      },
      error => {
        console.log('request interceptor1 onRejected()')
        return Promise.reject(error) // 一定要返回错误，不让之后能进入成功的流程
      }
    )
    axios.interceptors.request.use(
      config => {
        console.log('request interceptor2 onResolved()')
        return config
      },
      error => {
        console.log('request interceptor2 onRejected()')
        return Promise.reject(error)
      }
    )


    // 添加响应拦截器(回调函数，成功的必须返回response：用于把任务串联起来)
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor1 onResolved()')
        return response
      },
      error => {
        console.log('response interceptor1 onRejected()')
        return Promise.reject(error)
      }
    )
    axios.interceptors.response.use(
      response => {
        console.log('response interceptor2 onResolved()')
        return response
      },
      error => {
        console.log('response interceptor2 onRejected()')
        return Promise.reject(error)
      }
    )

    axios.get('http://localhost:3000/posts')
      .then(response => {
        console.log('data: ', response.data)
      })
      .catch(error => {
        console.log('error: ', error.message)
      })
  </script>
</body>

</html>

image-20220301001039494

先发送请求，再接收响应。所以会先触发请求拦截器，再触发响应拦截器，经过响应拦截器后才能得到数据

3.3.4 取消请求

express知识：Express笔记: clz

先搭建一个服务器：

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())  // 使用cors，允许跨域

app.use(express.json())   // 解析Content-Type为 application/json格式的请求体

app.get('/product1', (req, res) => {
  setTimeout(() => {
    res.send([
      {
        id: 1,
        name: 'product1'
      }
    ])
  }, 2000)
})

app.listen(3000, () => {
  console.log('http://localhost:3000')
})

开启服务器，node server.js或nodemon server.js（支持热更新）

取消请求的简单使用：

  1. 先定义一个变量cancel，用于保存取消请求的函数

  2. 设置请求路径、请求方法时，还要设置属性cancelToken，值为一个CancelToken对象，CancelToken类的构造函数的参数是用于请求的函数

    cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
  cancel = c // 保存取消请求函数，用于之后取消请求
})

  3. 在需要请求的地方，调用保存的取消请求的函数

<!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>取消请求</title>
</head>

<body>
  <button onclick="getProducts1()">获取商品列表1</button><br>

  <button onclick="cancelReq()">取消请求</button>

  <script src="./node_modules/axios/dist/axios.js"></script>
  <script>
    let cancel // 用于保存取消请求的函数

    const getProducts1 = () => {
      axios({
        url: 'http://localhost:3000/products1',
        cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
          cancel = c // 保存取消请求函数，用于之后取消请求
        })
      }).then(response => {
        cancel = null // 请求结束后保存的取消请求的函数不在需要保存
        console.log('请求1成功: ', response.data)
      }, error => {
        cancel = null
        console.log('请求1失败: ', error.message, error)
      })
    }

    const cancelReq = () => {
      if (typeof cancel === 'function') {
        cancel('强制取消请求1')
      } else {
        console.log('没有可以取消的请求')
      }
    }
  </script>
</body>

</html>

axios

另外，取消请求的函数可以传参，传的参数将变成请求失败时，Cancel对象的message(这个时候并不是Error对象)

取消请求优化：发送请求前取消掉未完成的请求

在点击事件最前面添加判断

if (typeof cancel === 'function') {
  cancel('取消请求')
}

这里会出现一个问题，如果连续发送三个请求(在收到响应之前)，会发现，第三个请求没有取消掉前一个未完成的请求

axios

为什么会这样呢？看下下面的流程图就可能可以迎刃而解了(有错可评论指出)

image-20220301185301548

为了解决上面的问题，这时候就需要使用axios.isCancel(error)判断是不是取消请求导致的请求失败，如果是，则此时不需要把cancel变为null

<!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>取消请求</title>
</head>

<body>
  <button onclick="getProducts1()">获取商品列表1</button><br>

  <button onclick="cancelReq()">取消请求</button>

  <script src="./node_modules/axios/dist/axios.js"></script>
  <script>
    let cancel // 用于保存取消请求的函数

    const getProducts1 = () => {
      if (typeof cancel === 'function') {
        cancel('取消请求')
      }

      axios({
        url: 'http://localhost:3000/products1',
        cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
          cancel = c // 保存取消请求函数，用于之后取消请求
        })
      }).then(response => {
        cancel = null // 请求结束后保存的取消请求的函数不在需要保存
        console.log('请求1成功: ', response.data)
      }, error => {
        if (axios.isCancel(error)) {
          console.log('请求1失败: ', error.message)
        } else {
          cancel = null
          console.log('请求1失败: ', error.message)
        }

      })
    }

    const cancelReq = () => {
      if (typeof cancel === 'function') {
        cancel('强制取消请求1')
      } else {
        console.log('没有可以取消的请求')
      }
    }
  </script>
</body>

</html>

image-20220301185709307

axios

通过拦截器再优化：增加代码可复用性

// 请求拦截器
axios.interceptors.request.use(config => {
  if (typeof cancel === 'function') {
    cancel('取消请求')
  }
  config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
    cancel = c // 保存取消请求函数，用于之后取消请求
  })

  return config
})

// 响应拦截器
axios.interceptors.response.use(response => {
  cancel = null
  return response
}, error => {
  if (axios.isCancel(error)) {
    console.log('请求取消: ', error.message)

    return new Promise(() => {}) // 中断Promise链。因为返回一个pending状态的对象时，后续的回调就不能执行了。
    // 因为后面的回调函数只有在状态发生变化时才能执行。
  } else {
    cancel = null
    return Promise.reject(error) // 将错误向下传递
  }
})

完整代码：

<!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>取消请求</title>
</head>

<body>
  <button onclick="getProducts1()">获取商品列表1</button><br>
  <button onclick="getProducts2()">获取商品列表2</button><br>

  <button onclick="cancelReq()">取消请求</button>

  <script src="./node_modules/axios/dist/axios.js"></script>
  <script>
    // 请求拦截器
    axios.interceptors.request.use(config => {
      if (typeof cancel === 'function') {
        cancel('取消请求')
      }
      config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
        cancel = c // 保存取消请求函数，用于之后取消请求
      })

      return config
    })

    // 响应拦截器
    axios.interceptors.response.use(response => {
      cancel = null
      return response
    }, error => {
      if (axios.isCancel(error)) {
        console.log('请求取消: ', error.message)

        return new Promise(() => {}) // 中断Promise链。因为返回一个pending状态的对象时，后续的回调就不能执行了。
        // 因为后面的回调函数只有在状态发生变化时才能执行。
      } else {
        cancel = null
        return Promise.reject(error) // 将错误向下传递
      }
    })

    let cancel // 用于保存取消请求的函数

    const getProducts1 = () => {
      axios({
        url: 'http://localhost:3000/products1',
      }).then(
        response => {
          console.log('请求1成功: ', response.data)
        },
        error => {
          console.log('请求1失败: ', error.message)
        })
    }

    const getProducts2 = () => {
      axios({
        url: 'http://localhost:3000/products1',
      }).then(
        response => {
          console.log('请求2成功: ', response.data)
        },
        error => {
          console.log('请求2失败: ', error.message)
        })
    }

    const cancelReq = () => {
      if (typeof cancel === 'function') {
        cancel('强制取消请求1')
      } else {
        console.log('没有可以取消的请求')
      }
    }
  </script>
</body>

</html>
赤蓝紫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios 请求node_使用Axios的Node中的HTTP请求
cuk0051的博客
08-27 1395
axios 请求nodeIntroduction 介绍 A video tutorial 视频教程 Installation 安装 The Axios API Axios API GET requests GET请求 Add parameters to GET requests 向GET请求添加参数 POST Requests POST请求 介绍 (Introduction) Axios is ...
axios node vue express
w18789476022的博客
12-18 560
文章目录day11. `vue cli` 与`ant design vue`之前端建设1. `vue cli`项目搭建2. 使用`ant deisign vue``3. axios is not defined`4.` localhost 8080`接口访问`3000`后台，因为端口不同，同源协议生效，导致报错。5.` axios`传参`post`后台接收不到，前端修改如下，后台通过`req.query`获取6. 路由`router`使用`7.Cannot read property ‘$router‘ o
深入理解 Axios
薛定谔的猫-前端领域
05-22 725
Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。拥有以下特性： 支持 Promise API； 能够拦截请求和响应； 能够转换请求和响应数据； 客户端支持防御 CSRF 攻击； 同时支持浏览器和 Node.js 环境； 能够取消请求及自动转换 JSON 数据。 HTTP 拦截器 Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下： 请求拦截器：在请求发送前统一执行某些操作，比如在请求头中添加 token ..
用axios请求node做的简单网络接口教学易懂
陈新科的博客
08-16 567
非常简单直接看代码，不懂的直接扣我 前端页面 <script> import axios from 'axios' // console.log(axios.prototype); export default { name:'AxiosBase', data() { return { list:'' } }, methods: { getData(){ // 发送基本请求 // axios.get('
nodejs中axios爬坑
weixin_45893488的博客
07-02 5276
axios是一个nodejs的请求工具，功能强大，同时。。也有很多坑，记录下自己爬过得坑 axios 中的基础用法 res = await axios({ url: 'http://url/inteface', method: 'post', data: data, params:params });` url 接口地址 method 方法（ps：axios支持很多 不过最常用的就是 get post） data是post带过去的
axios的笔记
weixin_37150764的博客
02-27 387
get请求 Request Payload数据为输入数据，即传给后台数据。即为get请求中params数据。 get请求的返回结果为预览里的数据，如从后台返回的整个表格数据。get请求中的result数据即为整个表格数据。 查看预览 params 是即将与请求一起发送的 URL 参数 import request from '@/utils/request' const url = "https://api.innofund.info"//"http://120.53.122.74:8080"//"http
笔记--axios
hahahaha__init__的博客
09-21 240
axios Promise based HTTP client for the browser and node.js axios的安装 使用 npm: $ npm install axios 使用bower: $ bower install axios 使用yarn: $ yarn add axios 使用 jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></scrip
详解Vue 2.0封装axios笔记
08-30
Vue 2.0封装axios笔记 本篇文章主要介绍了Vue 2.0封装axios笔记的相关知识点，包括axios的快速使用、常见用法、封装axios的理由、请求流程、错误处理和拦截器等内容。 axios快速使用：axios是Vue 2.0官方推荐的...
尚硅谷axios笔记——入门学习
weixin_53317758的博客
11-26 1253
取消请求，axios的基本使用、拦截器、axios.get、axios.post、设置请求体等等
axios笔记
hyhlsy的博客
09-02 149
目录axios是什么axios特征json-server安装axios安装axios使用axios外链接配置axios基本使用axios的其他使用axios默认配置axios创建实例对象axios拦截器axios取消请求axios源码分析与模拟axios对象创建axios发送请求模拟axios拦截器模拟axios取消请求总结axios与Axios的关系instance与axios的异同axios的整体运行流程拦截器是什么请求/响应数据转换器是什么response的整体结构如何取消未完成的请求axios的整体
node.js中axios使用心得总结
12-23
Axios是一个基于Promise的 HTTP 库，可以用在浏览器和node.js 中，因为尤大大的推荐，axios也变得越来越流行。最近项目中使用axios也遇到了一些问题，就借此机会总结一下，如有错误，还请不吝指正。 功能 浏览器端发起XMLHttpRequests请求 node层发起http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF（跨站请求伪造） 兼容 使用 npm npm install axios bower bower install axios cdn <script src=
前端-axios学习笔记
07-14
前端-axios学习笔记
17axios踩坑笔记1
08-08
为避免类似问题，建议开发者详细阅读axios的官方文档，了解其配置选项和默认行为，以及如何自定义请求头和数据序列化过程。同时，使用Postman等工具进行接口测试，可以帮助定位和解决问题。在Vue项目中，添加axios...
【Vue 学习】- VueJS 简单入门
2401_84411557的博客
05-01 294
2、MVVM 模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。
node总结与axios使用
wzy0507的博客
07-30 415
拦截器配一个就行了反正天天开心。
Day104.前端基础二：Axios、Node(JS环境)、NPM(包管理)、Babel(转码)、模块化、Webpack(打包)
a111042555的博客
07-16 1139
前端基础 工具、框架
Nodejs axios模块使用整理
天马3798
10-02 7476
支持PromoisAPI，支持拦截请求和响应，支持转换请求和响应数据，支持取消请求，支持自动转换JSON数据，支持客户端防御XSRF。Axios是一个基于Promise网络请求库，可以用于node.js 环境和浏览器环境使用。在node.js框架中封装http模块，在浏览器中分装XMLHttpRequests对象。这些属性都不必在配置中指定。类似$.ajax()1.nodejs 使用。1. 发送get请求。2.发送多个并发请求。
axios请求失败自动重发
高先生的猫
12-03 1663
在做vue、react项目的时候常会用axios请求库来与后端进行数据交互。我们通常采用一个用户凭证token来验证用户身份，服务器根据token进行判断当前用户是否有权限调用接口。 经常遇到的一个问题是，调用接口时token可能已经过期，此时调用接口会失败，需要重新登录后再调用接口。通常我们可能处理为，用户走完登录流程后再重新手动触发一次请求。这样的实现本身没什么问题，但是给用户的操作体验上有被中断的感觉，今天尝试解决了一下这个问题。 一、业务痛点 我的业务场景是，当一个接口（比如”用户发表评.
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 378
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值