博主信息
Lon
博文
28
粉丝
0
评论
0
访问量
3036
积分:0
P豆:62

Axios.js 基本用法

2021年10月11日 18:19:30阅读数:211博客 / Lon/ JavaScript

Axios.js 基本用法

了解更多请访问http://www.axios-js.com/zh-cn/

一、什么是axios.js

  • axios.js 是一个基于 promise 的 HTTP 库,支持浏览器和 Node 环境;
  • 说明白点,就是使用这个库来执行 Ajax 请求,获取 JSON 数据;
  • 我们可以利用 axios 可以发送 get、post 等一系列请求,然后得到数据;

二、特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

三、安装

安装方式,提供两种常用的,一种在 node 下运行,另一种在浏览器下运行;

1、使用 npm 在命令行运行如下命令,加载需要的包

  1. npm install axios

实例

  1. //引入axios
  2. const axios = require('axios');
  3. //使用get请求获取数据
  4. axios.get('https://unpkg.com/axios/dist/axios.min.js')
  5. .then(res => {
  6. console.log(res.data)
  7. })
  8. .catch(err => {
  9. console.log('错误' + err)
  10. })

2、如果要在浏览器使用 axios,直接可以使用 cdn 地址加载即可

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

实例

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //使用 get 请求获取远程数据,浏览器执行远程 Ajax 请求会有跨域问题
  4. axios.get('https://jsonplaceholder.typicode.com/posts')
  5. .then(res => {
  6. console.log(res.data)
  7. })
  8. .catch(err => {
  9. console.log('错误' + err)
  10. })
  11. </script>

四、请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

  1. //常用的配置项
  2. {
  3. // `url` 是用于请求的服务器 URL
  4. url: '/user',
  5. // `method` 是创建请求时使用的方法
  6. method: 'get', // default
  7. // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  8. // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  9. baseURL: 'https://some-domain.com/api/',
  10. // `headers` 是即将被发送的自定义请求头
  11. headers: {'X-Requested-With': 'XMLHttpRequest'},
  12. // `params` 是即将与请求一起发送的 URL 参数
  13. // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  14. params: {
  15. id: 12345
  16. },
  17. // `data` 是作为请求主体被发送的数据
  18. // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  19. data: {
  20. name: 'lisi'
  21. },
  22. }

全局的 axios 默认值

全局属性配置,即将属性中大量重复的内容抽离出来单独设置;

  1. axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

实例

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //全局默认值设置,baseUrl 会自动在 url 前面添加
  4. axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  5. axios({
  6. url:'/posts',
  7. method:'get',
  8. params : {
  9. userId : 1,
  10. id : 1
  11. }
  12. }).then(res => {
  13. console.log(res.data)
  14. })
  15. </script>

五、并发操作

1、如果项目中可能会产生多个异步请求,它们会根据耗时长短来执行;

2、我们如果想让所有的异步请求后,按照指定的顺序进行执行,可以使用处理并发请求的助手函数

  • axios.all(iterable)
  • axios.spread(callback)

实例

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //全局默认值设置,baseUrl 会自动在 url 前面添加
  4. axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  5. axios.all([
  6. axios({
  7. url: 'users',
  8. data: '1.异步'
  9. }),
  10. axios({
  11. url: 'users',
  12. data: '2.异步'
  13. }),
  14. axios({
  15. url: 'users',
  16. data: '3.异步'
  17. })
  18. ]).then(value => {
  19. for (let i = 0; i < value.length; i++) {
  20. console.log(value[i].config.data)
  21. }
  22. })
  23. </script>

上面循环获取相应的值,比较麻烦,所以 axios 提供了另一个解决方案

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //全局默认值设置,baseUrl 会自动在 url 前面添加
  4. axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  5. axios.all([
  6. axios({
  7. url: 'users',
  8. data: '1.异步'
  9. }),
  10. axios({
  11. url: 'users',
  12. data: '2.异步'
  13. }),
  14. axios({
  15. url: 'users',
  16. data: '3.异步'
  17. })
  18. ]).then(axios.spread((res1 , res2 , res3) => {
  19. console.log(res1.config.data)
  20. console.log(res2.config.data)
  21. console.log(res3.config.data)
  22. }))
  23. <script>

六、实例化

实例化,顾名思义就是 new 出一个对象来,这样这个对象具有独立性不被干扰;

可以使用自定义配置新建一个 axios 实例

实例

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //自定义实例化对象
  4. const myAxios = axios.create();
  5. myAxios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  6. myAxios({
  7. url : 'users'
  8. }).then(res => console.log(res.data))
  9. </script>

七、实例方法

以下是可用的实例方法。指定的配置将与实例的配置合并。

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
实例
  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  4. //request请求 通用
  5. axios.request({
  6. method : 'get',
  7. url : 'users'
  8. }).then(res => console.log(res.data))
  9. </script>

七、拦截器

1、所谓拦截操作,就是在 Ajax 获取数据之前先拦截处理一些事务的操作;

2、这些操作包括:修改 axios 配置信息,loading,判断验证跳转等等;

3、拦截处理完毕之后,再通过 return 返回基础处理即可;

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. <script>
  3. //自定义实例化对象
  4. const myAxios = axios.create();
  5. myAxios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
  6. // 添加请求拦截器
  7. myAxios.interceptors.request.use(function (config) {
  8. // 在发送请求之前做些什么
  9. console.log('loading...');
  10. return config;
  11. }, function (error) {
  12. // 对请求错误做些什么
  13. return Promise.reject(error);
  14. });
  15. // 添加响应拦截器
  16. myAxios.interceptors.response.use(function (response) {
  17. // 对响应数据做点什么
  18. return response;
  19. }, function (error) {
  20. // 对响应错误做点什么
  21. return Promise.reject(error);
  22. });
  23. myAxios({
  24. url : 'users'
  25. }).then(res => console.log(res.data))
  26. </script>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 这篇文章主要介绍了ES6 Generator使,结合实例形式分析了ES6 Generator功能、使与操作注意事项,需要的朋友可以参考下
    java中正则表达式的使:1、【Test01.java】使正则表达式使代码变得非常简洁;2、【TestMatcher01.java】Matcher类的使于字符串的验证。
    下面由golang教程栏目给大家介绍golang gorm操作mysql及gorm,希望对需要的朋友有所帮助!
    篇文章带大家一起了解一下Nodejs内置模块的。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    ECMAScript描述了javascript的
    python总结:1、Python标识符;2、Python五个标准的数据类型;3、Python数据类型转换;4、Python运算符。
    文是介绍MySQL使的DDL及DML语句。
    使PHP要如何操作Redis?下面篇文章给大家分享一些PHP操作Redis的,例如redis连接、操作Strng、List、Hash、Set等等,希望对大家有所帮助。
    文介绍MySQL使之DCL语句和聚合函数。
    文为大家分享了一些php的相关知识,对于一些初学者非常有参考价值,希望能够帮助到大家。
    python计算统计值的方:1、计算平均值,代码为【s = s + num;return s/len(numbers)】;2、计算方差,代码为【sdev = sdev + (num - mean
    遗传算步骤是:1、初始化;2、个体评价;3、选择运算;4、交叉运算;5、变异运算,将变异算子作于群体;6、终止条件判断。
    MYSQL有哪些常SQL语句,不知道你是否知道,今天小编就带大家一起来复习常的sql语句,有需要的小伙伴可以参考参考。
    raptor允许使连接流程图符号来创建算,然后可以在其环境下直接调试和运行算,包括单步执行或连续执行的模式。
    文介绍通过PDO扩展与MySQL数据库交互实现使
    互联网上使通信协议是“TCP/IP”。“TCP/IP”即传输控制协议/网际协议,是指能够在多个不同网络间实现信息传输的协议簇,它是在网络的使中的最的通信协议。
    文中我们来研究怎样 TensorFlow.js 创建的 AI 模型,并使更复杂的模型实现一些有趣的功能。
    下面由composer教程栏目给大家介绍一张图搞清composer作以及原理,希望对需要的朋友有所帮助!
    ps的功能有:1、图像处理、编辑、通道、图层、路径综合运;2、图像色彩的校正;3、各种特效滤镜的使;4、特效字的制作。
    篇文章向大家介绍php础常代码示例,利 debug_backtrace 自定义个的日志打印函数,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。