详解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 el-table字段点击出现el-input输入框,失焦保存方式

    vue el-table字段点击出现el-input输入框,失焦保存方式

    这篇文章主要介绍了vue el-table字段点击出现el-input输入框,失焦保存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue中记录滚动条位置的两种方法

    vue中记录滚动条位置的两种方法

    最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下
    2023-01-01
  • vue实现盒子内拖动方块移动的示例代码

    vue实现盒子内拖动方块移动的示例代码

    这篇文章主要给大家介绍了如何通过vue实现盒子内拖动方块移动,文章通过代码示例讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴可以参考阅读本文
    2023-08-08
  • Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue匿名插槽与作用域插槽的合并和覆盖行为

    这篇文章主要介绍了Vue基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue3 Radio单选切换展示不同内容实现代码

    Vue3 Radio单选切换展示不同内容实现代码

    这篇文章主要介绍了Vue3 Radio单选切换展示不同内容,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 关于vuex的学习实践笔记

    关于vuex的学习实践笔记

    vuex是vue的状态管理模式,主要可以解决父子组件嵌套层数较多,或者兄弟组件之间需要维护同一个状态的情况。下面这篇文章主要给大家介绍了关于学习vuex的相关资料,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04
  • 详解Vue-cli代理解决跨域问题

    详解Vue-cli代理解决跨域问题

    本篇文章主要介绍了Vue-cli代理解决跨域问题,详细的介绍了Vue如何设置代理,具有一定参考价值,有兴趣的可以了解一下
    2017-09-09
  • Electron store及shareObject进程间数据交互存储功能封装

    Electron store及shareObject进程间数据交互存储功能封装

    这篇文章主要为大家介绍了Electron store及shareObject进程间数据交互存储功能封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • antd vue v-decorator的取值与赋值问题

    antd vue v-decorator的取值与赋值问题

    这篇文章主要介绍了antd vue v-decorator的取值与赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论