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

 更新时间:2017年09月15日 10:47:51   作者:craftmanship  
本篇文章主要介绍了axios 全攻略之基本介绍与使用(GET 与 POST),详细的介绍了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 的使用和各类参数的配置。

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

相关文章

  • vue-quill-editor富文本编辑器超详细入门使用步骤

    vue-quill-editor富文本编辑器超详细入门使用步骤

    vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器入门使用步骤的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue将页面导出为图片或者PDF

    Vue将页面导出为图片或者PDF

    这篇文章主要为大家详细介绍了Vue导出页面为PDF格式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • el-upload 文件上传组件的使用讲解

    el-upload 文件上传组件的使用讲解

    Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,element ui组件组也给我们提供了上传的组件,本文给大家介绍el-upload 文件上传组件的使用,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue3中实现选取头像并裁剪

    Vue3中实现选取头像并裁剪

    这篇文章主要详细介绍了在vue3中如何选取头像并裁剪,文章中有详细的代码示例,需要的朋友可以参考阅读
    2023-04-04
  • iview中Select 选择器多选校验方法

    iview中Select 选择器多选校验方法

    下面小编就为大家分享一篇iview中Select 选择器多选校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue嵌入本地iframe文件并获取某元素的值方式

    vue嵌入本地iframe文件并获取某元素的值方式

    这篇文章主要介绍了vue嵌入本地iframe文件并获取某元素的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3使用setup监听props实现方法详解

    Vue3使用setup监听props实现方法详解

    这篇文章主要为大家介绍了Vue3使用setup监听props实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue项目自适应屏幕分辨率实现步骤

    vue项目自适应屏幕分辨率实现步骤

    这篇文章主要给大家介绍了关于vue项目自适应屏幕分辨率实现的相关资料,作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率的适配,需要的朋友可以参考下
    2023-09-09
  • vue如何解决循环引用组件报错的问题

    vue如何解决循环引用组件报错的问题

    这篇文章主要介绍了vue如何解决循环引用组件报错的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue中实现滚动加载与无限滚动

    Vue中实现滚动加载与无限滚动

    本文主要介绍了Vue中实现滚动加载与无限滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06

最新评论