axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法。

安装

npm install axios -S

在main.js配置

import axios from 'axios'
Vue.prototype.$axios = axios

使用

this.$axios({
url: "",
method: "get",
params: {}
}).then(res => {
console.log(res)
})

也可以先进行封装后调用

封装

先新建一个network文件夹再建一个request.js

import axios from 'axios'
export function request(config) {
return new Promise((resolve, reject) => {
创建axios实例
const instance = axios.create({
baseURL: '',
})
// 发送网络请求
instance(config).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}

简写

import axios from 'axios'

export function request(config) {
// 创建axios实例
const instance = axios.create({
baseURL: '',
})
// 发送网络请求
return instance(config)
}

使用:

import {request} from '../network/request'

request({
url:'',
params: {}
}).then(res => {
console.log(res)
})

vue中axios的安装使用的更多相关文章

  1. vue中axios的安装和使用

    有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...

  2. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  3. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  4. vue中axios使用二:axios以post,get,jsonp的方式请求后台数据

    本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...

  5. vue中axios的深入使用

    如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

  6. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  7. vue 中axios 的基本配置和基本概念

    axios的基本概念及安装配置方法   ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...

  8. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  9. vue中axios的简单使用

    我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递 现在的这篇是最简单的使用,后续会添加上来复杂的使用 ...

随机推荐

  1. kb4019990 补丁导致wpf无法启动异常

     问题补丁:[Microsoft Update Catalog](https://www.catalog.update.microsoft.com/Search.aspx?q=kb4019990 )  ...

  2. 有关KMP算法

    KMP算法: 此算法的本质是首先对于模板字符串进行计算,生成一个数组(next数组),该数组反映了模板字符串的情况. 例: S: ABADACABABCD P: ABAB 当我们查询到P3与S3(B和 ...

  3. Recover刷机简介

    Recovery Recovery是一种可以对安卓手机内部的数据文件进行修改的模式,类似电脑的PE.不同的recovery有不同的功能.使用recovery可以说是刷机(卡刷)的基础,想要比较顺畅的刷 ...

  4. reset slave all更彻底

    reset slave是各版本Mysql都有的功能,可以让slave忘记自己在master binary log中的复制位置. reset slave命令主要完成以下工作内容: -删除master.i ...

  5. iphone ios app互相调用

    正好要做这个,记录一下 1.ios应用程序间互相启动 2.网页如何调用自己的app http://www.dotblogs.com.tw/yang5664/archive/2012/11/24/850 ...

  6. SpringCloud服务的注册发现--------consul实现服务与发现

    1,consul也可以替代Eureka实现注册和发现的功能,即注册中心. 之前在linux环境通过consul + upsync + nginx 实现nginx 的动态负载均衡 https://www ...

  7. 角色移动优化【Unity2D自学之路】

    自学unity2D独立游戏开发,第一篇自学笔记.在场景中添加角色,并给角色添加Rigidbody2D刚体组件.collection2D碰撞体组件,c#脚本组件控制人物移动和跳跃.c#脚本组件内容如下, ...

  8. Ubuntu系统在Anaconda中安装Python3.6的虚拟环境

    原因:Anaconda的python版本是3.7的,TensorFlow尚不支持此版本,于是我们创建一个Python的虚拟环境以支持TensorFlow 创建tf环境 conda create --n ...

  9. python文件封装成*.exe

    python文件封装成*.exe文件(单文件和多文件) 环境:win10 64位 python3.7 原文: https://www.cnblogs.com/jackzz/p/9431923.html ...

  10. CSS盒子模型(boeder)+浮动(float)+定位(position)

    盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(wid ...