详解axios 全攻略之基本介绍与使用（GET 与 POST）

axios

axios 是一个基于 Promise 的 HTTP 客户端，专门为浏览器和 node.js 服务

Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request，所以这里介绍一下 axios 的功能和基本的使用方法，希望能够对各位所有帮助。^_^

功能

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据格式
  • 客户端支持防范 XSRF 攻击

浏览器支持

axios 能够支持 IE7 以上的 IE 版本，同时能够支持大部分主流的浏览器，需要注意的是，你的浏览器需要支持 Promise，才能够使用 axios。所以比较好的做法是先安装 polyfill，然后再使用 axios。

安装

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

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

使用

这里以 Vue 为例：在 NPM 中安装 axios 之后，需要在 main.js 文件中引用 package

import axios from 'axios'

然后全局绑定

Vue.prototype.$http = axios

然后可以在 .vue 文件中使用 $http 来代替 axios

GET

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

// Optionally the request above could also be done as
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

POST

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

同时发送多个请求

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) {
  // Both requests are now complete
 }));

当然，axios 的功能还包括 axios API、interceptor 等等，这里想要详细了解的可以查看官方文档：axios，后面陆续会介绍下 interceptor 的使用和各类参数的配置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 简单谈谈axios中的get,post方法

    学习vue和nodejs的过程当中,涉及到了axios,今天为了测试,写了get和post两个方法来跟node服务端交互,结果因为header和参数弄了好久,在此记录一下,同时分享: 由于刚接触axios,在测试方法中,写的都是很简单的东西,不过能够实现基础功能,大神看到的话..非常欢迎指导.. //GET方法 axios.get(url, { params: { 'key': 'value' } }).then(function (response) { alert(''.concat(res

  • 详解axios 全攻略之基本介绍与使用（GET 与 POST）

    axios axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务 Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助.^_^ 功能 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换 JSON 数据格式 客户端支持防

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • vue axios整合使用全攻略

    惯例先安装axios,不多说! cnpm install axios 1.axios配置 我的目录结构src/axios/index.js,axios配置都在该文件下 src/axios/index.js 如下: import axios from 'axios' import qs from 'qs' // axios 配置 axios.defaults.timeout = 5000; axios.defaults.headers.post['Content-Type'] = 'applica

  • Chrome插件(扩展)开发全攻略(完整demo)

    Chrome插件(扩展)开发全攻略(完整demo)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东

  • QQ密码破解与对策全攻略

    QQ密码破解与对策全攻略 一.本地破解  方法:  这个办法的首要条件是你所在的机器开过你想要的QQ号,这又分两种情况,一是你所在的机器真的 曾经开过这个号码,二是通过共享入侵得到你想要的号码的整个目录,把它拷贝到你的OICQ的目录 下,启动OICQ你就能在号码选择下拉列表中看到这个号码了.共享入侵请参看本站黑客教程之 对 共享主机的简单入侵 ,网上硬盘共享最多的就是网吧和公司,而前者的硬盘里存有大量的QQ号码, 只要你能进去且它的OICQ目录或它所在的分区是共享的话,自己慢慢挑吧.但是网上的I

  • 生成PDF全攻略之在已有PDF上添加内容的实现方法

    生成PDF全攻略之在已有PDF上添加内容的实现方法

    项目在变,需求在变,不变的永远是敲击键盘的程序员..... PDF 生成后,有时候需要在PDF上面添加一些其他的内容,比如文字,图片.... 经历几次失败的尝试,终于获取到了正确的代码书写方式. 在此记录总结,方便下次以不变应万变,需要的 jar 请移步:生成PDF全攻略 PdfReader reader = new PdfReader("E:\\A.pdf"); PdfStamper stamper = new PdfStamper(reader, new FileOutputStr

  • 微信公众帐号开发教程之图文消息全攻略

    微信公众帐号开发教程之图文消息全攻略

    引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本消息的使用示例,大家就能够照猫画虎的,或许是因为我的绘画功底太差,画出的那只猫本来就不像猫吧-- 本篇主要介绍微信公众帐号开发中图文消息的使用,以及图文消息的几种表现形式.标题取名为"图文消息全攻略",这绝对不是标题党,是想借此机会把大家对图文消息相关的问题.疑虑.障碍全部清除掉. 图文消

  • 将TOMCAT装入IIS全攻略

    来源:网友提供如有版权问题请与我们联系<BR><BR>Tomcat IIS             HowTo:将Tomcat装入IIS全攻略<BR>1,我的安装环境是W2K(日文版),IIS5<BR>Tomcat             3.1下载地址<BR>http://jakarta.apache.org/builds/tomcat/release/v3.1/bin/<BR><BR>isapi_redirect.dl

  • 文件关联及应用—注册表使用全攻略之二

    注册表的文件关联及应用-注册表使用全攻略之二  喜欢使用Windows右键快捷菜单的朋友可能知道,当你选择了一个文件(或者是文件夹或是系统图标)再单击鼠标右键,系统就会弹出一个菜单,菜单上面的各种"功能"(或称"操作")任你选择,但是你是否注意到,当你安装一些应用软件之后,你的右键菜单是不是膨胀,以winzip为例,安装winzip之后,文件或文件夹的右键菜单当中就增加了功能选择项"Add to Zip"和"Add to xxx.zip

  • 巧改注册表来增强网络功能—注册表使用全攻略之五

    巧改注册表来增强网络功能-注册表使用全攻略之五 1.指定首选的网络服务器 在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\NetworkProvider],并在其主键下创建或更改串值AuthenticatingAgent,附值为指定的服务器 2.禁止自动登陆网络 在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\Ne

随机推荐