vue中axios的使用详解

目录
  • 1、选择什么网络模块
  • 2、JSONP
  • 3、axios的请求方式
  • 4、axios框架的基本使用
    • 1、新建vue项目
    • 2、安装axios依赖
    • 3、编写代码
  • 4、请求结果
  • 5、axios发送并发请求
    • 方式1：
    • 方式2
  • 6、axios的配置
    • 6.1、全局配置
    • 6.2、常见的配置选项
  • 总结

1、选择什么网络模块

2、JSONP

3、axios的请求方式

网络请求模拟：http://httpbin.org/

4、axios框架的基本使用

1、新建vue项目

vue init webpack learnaxios

2、安装axios依赖

npm install axiox@0.18.0 --save

3、编写代码

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res=>{
  console.log(res);
})
axios({
  url:'http://123.207.32.32:8000/home/data',
  // 专门针对于get请求的参数拼接
  params:{
    type: 'pop',
    page: 3
  }
}).then(res=>{
  console.log(res)
})

4、请求结果

5、axios发送并发请求

方式1：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// axios发送并发请求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(response=>{
  console.log(response);
})

方式2

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// axios发送并发请求
// 方式2
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

6、axios的配置

6.1、全局配置

6.2、常见的配置选项

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue之Axios的异步通信详解

    Vue之Axios的异步通信详解

    目录 1.什么是Axios 2.为什么要使用Axios 3.第一个Axios应用程序 4.Vue的生命周期 总结 1.什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API[JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF(跨站请求伪造)

  • Vue之Axios异步通信详解

    Vue之Axios异步通信详解

    1.首先我们创建一个.json文件,作为交互使用,我们列举json数据格式模拟传递到前端来帮助小伙伴们理解. { "name": "咸鱼_翻身", "url": "https://blog.csdn.net/aaa123_456aaa", "page": 1, "address": { "street": "湘桥区", "city&quo

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • 基于axios在vue中的使用

    基于axios在vue中的使用

    目录 一.Axios是什么 二.Axios有哪些特性 三.Axios浏览器支持 四.安装 1.使用 npm 2.使用 bower 3.使用 cdn 五.用法(vue项目已搭建) 1. Axios基础用法(get.post.put 等请求方法) 2. Axios进阶用法(实例.配置.拦截器.取消请求等) 3.Axios进一步封装,在项目中的实际应用 一.Axios是什么 Axios是一个基于promise的HTTP库(类似于jQuery的Ajax,用于HTTP请求) 可以用于浏览器和node.js

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • vue中axios的使用详解

    vue中axios的使用详解

    目录 1.选择什么网络模块 2.JSONP 3.axios的请求方式 4.axios框架的基本使用 1.新建vue项目 2.安装axios依赖 3.编写代码 4.请求结果 5.axios发送并发请求 方式1: 方式2 6.axios的配置 6.1.全局配置 6.2.常见的配置选项 总结 1.选择什么网络模块 2.JSONP 3.axios的请求方式 网络请求模拟:http://httpbin.org/ 4.axios框架的基本使用 1.新建vue项目 vue init webpack learn

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

随机推荐