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. .tar.xz文件的创建和解压

    创建tar.xz文件:只要先 tar cvf xxx.tar xxx/ 这样创建xxx.tar文件先,然后使用 xz -z xxx.tar 来将 xxx.tar压缩成为 xxx.tar.xz 解压ta ...

  2. asp.net core 3.1 引用的元包dll版本兼容性问题解决方案

    自从.netcore 3.1出来后,大家都想立马升级到最新版本.我也是如此,微软也对.netcore 3.1的官方组件不断升级,几乎每隔几天就会有部分元包可以升级.每次打开Nuget包管理器,“更新” ...

  3. 如何使用python图形化界面wxPython

    GUI库主要有三类:tkinter,wxPython和PyQt5,下面主要是针对wxPython的使用说明. 下面的操作均在win10 + pycharm上进行 wxPython的安装: pip in ...

  4. 图-搜索-DFS-51. N皇后

    2020-03-15 19:49:59 问题描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n ...

  5. [JVM教程与调优] 什么是JVM运行时参数?

    我们接着上一章节[JVM教程与调优] JVM都有哪些参数类型?的内容继续讲解,这章我们来介绍一下:如何查看JVM运行时参数.这一点十分重要,因为我们在进行JVM参数调优的时候,我们首先得知道目前系统运 ...

  6. FormDataBodyPart获取表单文件名乱码解决方法

    FormDataMultiPart formData=; FormDataBodyPart filePart=; filePart.getFormDataContentDisposition().ge ...

  7. Python第五章-内置数据结构04-字典

    Python 内置的数据结构 四.字典(dict) 字典也是 python 提供给我们的又一个非常重要且有用的数据结构. 字典在别的语言中有时叫关联数组.关联内存.Map等. 字典中存储的是一系列的k ...

  8. layer弹层插件

      // 使用前需要引入jquery的支持,链接如下:   https://blog-static.cnblogs.com/files/liguanlong/jquery1.9.1.min.js    ...

  9. Apache服务器故障排除攻略

    Apache服务器故障排除攻略 应用服务器Apache浏览器配置管理网络应用  随着网络技术的普及.应用和Web技术的不断完善,Web服务已经成为互联网上重要的服务形式之一.原有的客户端/服务器模式正 ...

  10. python之面向对象的关系

    一.从空间角度研究类 类外面可以给对象封装属性 class A: address = '美丽富饶的沙河' def __init__(self, name): self.name = name def ...