axios的安装和使用

axios的安装和使用文章目录一、axios介绍二、安装axios三、案例一、axios介绍什么是axios?Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性:1、从浏览器中创建XMLHttpRequests2、从node.js创建http请求3、支持PromiseAPI4、拦截请求和响应5、转换请求数据和响应数据6、取消请求7、自动转换JSON数据8、客户端支持防御XSRF浏览器支持:二、安装axios方法一:速.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

在这里插入图片描述

一、axios介绍

什么是 axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性:
1、从浏览器中创建 XMLHttpRequests
2、从 node.js 创建 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持防御 XSRF

浏览器支持:
在这里插入图片描述

二、安装axios

  1. 方法一:速度慢
npm install axios -g

Jetbrains全家桶1年46,售后保障稳定

  1. 方法二:速度快
cnpm install axios -g

参数说明:
-g:表示全局安装,将会安装在你配置的:C:\Users\XinLiu\nodejs\node_global目录下。如果不指定则为当前文件夹所在目录(局部);

安装成功后如下所示:

在这里插入图片描述
3. 无需安装,直接使用cdn

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

三、 案例

  1. 执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) { 
   
    console.log(response);
  })
  .catch(function (error) { 
   
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', { 
   
    params: { 
   
      ID: 12345
    }
  })
  .then(function (response) { 
   
    console.log(response);
  })
  .catch(function (error) { 
   
    console.log(error);
  });
  1. 执行 POST 请求
axios.post('/user', { 
   
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) { 
   
    console.log(response);
  })
  .catch(function (error) { 
   
    console.log(error);
  });

  1. 执行多个并发请求
function getUserAccount() { 
   
  return axios.get('/user/12345');
}

function getUserPermissions() { 
   
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) { 
   
    // 两个请求现在都执行完成
  }));

四、框架整合

1、整合vue-axios

基于vuejs 的轻度封装

1.1 安装vue-axios

cnpm install --save axios vue-axios -g //-g:全局安装

1.2 将下面代码加入入口文件:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

按照这个顺序分别引入这三个文件: vue, axios and vue-axios

1.3 你可以按照以下方式使用:

Vue.axios.get(api).then((response) => { 
   
  console.log(response.data)
})

this.axios.get(api).then((response) => { 
   
  console.log(response.data)
})

this.$http.get(api).then((response) => { 
   
  console.log(response.data)
})

五、插件

  1. axios-retry

Axios 插件 重试失败的请求

1.1 安装

cnpm install axios-retry -g //-g:全局安装

1.2 使用

// CommonJS
// const axiosRetry = require('axios-retry');

// ES6
import axiosRetry from 'axios-retry';

axiosRetry(axios, { 
    retries: 3 });

axios.get('http://example.com/test') // The first request fails and the second returns 'ok'
  .then(result => { 
   
    result.data; // 'ok'
  });

// Exponential back-off retry delay between requests
axiosRetry(axios, { 
    retryDelay: axiosRetry.exponentialDelay});

// Custom retry delay
axiosRetry(axios, { 
    retryDelay: (retryCount) => { 
   
  return retryCount * 1000;
}});

// 自定义 axios 实例
const client = axios.create({ 
    baseURL: 'http://example.com' });
axiosRetry(client, { 
    retries: 3 });

client.get('/test') // 第一次请求失败,第二次成功
  .then(result => { 
   
    result.data; // 'ok'
  });

// 允许 request-specific 配置
client
  .get('/test', { 
   
    'axios-retry': { 
   
      retries: 0
    }
  })
  .catch(error => { 
    // The first request fails
    error !== undefined
  });

注意:除非 shouldResetTimeout被设置, 这个插件将请求超时解释为全局值, 不是针对每一个请求,二是全局的设置。

1.3 测试
克隆这个仓库 然后 执行:

cnpm test
  1. vue-axios-plugin

Vuejs 项目的 axios 插件

2.1 安装

可以通过script标签引入,无需安装:

<!-- 在 vue.js 之后引入 -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axios-plugin"></script>
cnpm install --save vue-axios-plugin -g //-g:全局安装

然后在入口文件配置如下:

import Vue from 'Vue'
import VueAxiosPlugin from 'vue-axios-plugin'

Vue.use(VueAxiosPlugin, { 
   
  // 请求拦截处理
  reqHandleFunc: config => config,
  reqErrorFunc: error => Promise.reject(error),
  // 响应拦截处理
  resHandleFunc: response => response,
  resErrorFunc: error => Promise.reject(error)
})

2.2 示例
在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法,使用如下:

this.$http.get(url, data, options).then((response) => { 
   
  console.log(response)
})
this.$http.post(url, data, options).then((response) => { 
   
  console.log(response)
})

你也可以通过 this.$axios 来使用 axios 所有的 api 方法,如下:

this.$axios.get(url, data, options).then((response) => { 
   
  console.log(response)
})

this.$axios.post(url, data, options).then((response) => { 
   
  console.log(response)
})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/201105.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 如何获取窗口句柄「建议收藏」

    如何获取窗口句柄「建议收藏」1、使用FindWindow函数获取窗口句柄2、获取所有顶层窗口以及它们的子窗口使用EnumWindows和EnumChildWindows函数以及相对的回调函数EnumWindowsProc和EnumChildWindowsProc获取所有顶层窗口以及它们的子窗口3、使用GetDesktopWindow和GetNextWindow函数得到所有的子窗口…

  • 如何申请注册在国内可以登录使用国外邮箱?「建议收藏」

    如何申请注册在国内可以登录使用国外邮箱?「建议收藏」2022年冬奥会的开始、冰墩墩的爆火,这些让在国外无法回国的华人,十分羡慕,也让很多之前不怎么联系的朋友使用邮件交流了起来,那么是不是所有邮箱都可以向国外发信呢?其实并不是,我之前使用过,很多邮箱都是无法向国外发信的,现在我注册使用的是TomVIP邮箱,公司使用的Tom企业邮箱,因为做出口贸易,才选择的这家邮箱,在国外收发信方面做的还是非常棒的!如何申请注册国外邮箱首先,要进入邮箱官网(网页进行搜索、网址直接进入),选择自己喜欢的邮箱域名,点击注册;其次,选择邮箱套餐,依据自己日常使用的邮箱容量、发信

  • 富集分析集锦(KEGG富集分析图)

    链接:https://www.jianshu.com/p/988d90484f77不管是转录组,还是芯片数据,或者其他有关基因的组学分析,每当数据分析到后面,要想得到结果,都躲不过这个富集分析,因为它是帮助我们从庞杂的组学数据中发掘规律重要的一环,对基因功能进行富集分析,就有可能发现在生物学过程中起关键作用的生物通路,并且帮助理解生物学过程的分子机制。现在的高通量测序带来的巨大数据量,让我们眼…

  • python类的初始化方法_python初始化列表

    python类的初始化方法_python初始化列表【背景】在scikit-learn基础上系统结合数学和编程的角度学习了机器学习后(我的github:https://github.com/wwcom614/machine-learning),意犹未尽,打算再借势学习下深度学习TensorFlow。无奈安装之后遇到了这个问题,耽误了几个小时才得以解决。我发现这是个很多人开始TensorFlow之旅普遍遇到的问题,而且是很多人尝试了网上很多方法都未解…

  • C++中的explicitkeyword

    C++中的explicitkeyword

    2021年11月24日
  • jenkins拉取gitlab代码_git强制覆盖远程仓库代码

    jenkins拉取gitlab代码_git强制覆盖远程仓库代码前言python自动化的脚本开发完成后需提交到git代码仓库,接下来就是用Jenkins拉取代码去构建自动化代码了新建项目打开Jenkins新建一个自由风格的项目源码管理Repository

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号