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. 解决不管其他元素z-index设置多高,都在视频下面的方法

    <div style="z-index:-1"> <embed name="Movie1" src="http://ecards.s ...

  2. 解决QQ“抱歉,无法发起临时会话,您可以 添加对方为好友以发送消息”

    很多网站,目前无法发起临时会话,自己在找网上找到教程,特分享给大家.自从2014年3月1日开始,网站上放置QQ客服代码的网站,在点击联系QQ时,以前可以正常发起临时会话的,现在提示:“抱歉,无法发起临 ...

  3. Jenkins+Ant+JMeter报告自动化

    1.参考Jenkins+Ant+JMeter集成,安装Jenkins(不需要安装Performance Plugin插件),建立Slave节点,连接Slave节点,创建任务等. 2.将Jenkins+ ...

  4. 【开发工具 docker】值得学习的应用容器引擎docker安装

    概述: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何 ...

  5. Python GUI wxPython StaticText控件背景色透明

    import wx class TransparentStaticText(wx.StaticText): """ 重写StaticText控件 "" ...

  6. go第三方常用包

    配置 go-ini/ini 用于读取 ini 格式配置文件. 地址:https://github.com/Go-ini/ini tomal 用于读取 conf 格式配置文件. 地址:https://g ...

  7. Django实现简单的用户添加、删除、修改等功能

    一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...

  8. django自动生成接口文档

    我们在实际项目中,会需要将我们的一些接口的信息返回给前端,便于前后端的交互,在实际使用中,这种自动生成接口文档的模块很多,我主要是用REST framework自动生成接口文档,这个需要用到的是cor ...

  9. Excel知识点与技巧1

    1.工作区:方便两个工作表之间进行对比 2.工作表标签颜色 3.交换两列的次序 4.快速到达边界:即快速到达第一行或最后一行 5.冻结窗格:可以固定某几行或某几列一直存在于窗口,不会随着往下拉或往右拉 ...

  10. rabbitmq++:rabbitmq 三种常用的交换机

    更多 rabbitmq 介绍 首先先介绍一个简单的一个消息推送到接收的流程,提供一个简单的图: 黄色的圈圈就是我们的消息推送服务,将消息推送到 中间方框里面也就是 rabbitMq的服务器: 然后经过 ...