Vue使用axios发送请求并实现简单封装的示例详解

 更新时间:2022年06月30日 14:19:26   作者:什么都干的派森  
这篇文章主要介绍了Vue使用axios发送请求并实现简单封装,主要包括安装axios及简单使用配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、安装axios

npm install axios --save

二、简单使用

1.配置

main.js中加入如下内容

// 引入axios ---------------------------------------------------
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.prototype.$axios.defaults.baseURL = 'http://127.0.0.1:8000/' // 请求根路径
// -------------------------------------------------------------

2.发送请求

<1>get

this.$axios.get('index').then(res => {
  // 返回数据在 res.data 中
})

<2>post

this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回数据在 res.data 中
})

<3>并发

var res1 = this.$axios.get('index')
var res2 = this.$axios.post('login', {user:"admin", pwd:"123"})
this.$axios.all([res1, res2]).then(this.$axios.spread(res1, res2) => {
  // 两个请求的返回结果在 res1 和 res2 中
})

三、封装使用

1.创建js封装类

src/request/index.js

// 引入
import Axios from 'axios'
import { Message } from 'element-ui'   	// 需要装个 element-ui,错误提示界面友好一些

// 前端存在 localStorage 中的 token
const token = localStorage.getItem('token')

// 实例化
const request = Axios.create({
  baseURL: "http://127.0.0.1:8000/",  	// 服务根路径
  timeout: 200000,						// 请求过期时间
  headers: {
    Authorization: token    			// token 插入请求头给后端校验
  }
})

// 拦截后端返回的请求
request.interceptors.response.use(res => {
  if (res.status !== 200) {
    Message.error("something err...") 	// 返回错误的提示信息
  }
  return res.data     					// 只取 res 中的 data,后续取值不需要再写一层 data 了  
})

// 导出
export default request

2.配置

main.js中改成如下内容

// 引入axios ---------------------------------------------------
import request from './request'
Vue.prototype.$http = request
// -------------------------------------------------------------

3.发送请求

<1>get

this.$http.get('index').then(res => {
  // 返回数据在 res.data 中
})

<2>post

this.$http.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回数据在 res.data 中
})

<3>并发

var res1 = this.$http.get('index')
var res2 = this.$http.post('login', {user:"admin", pwd:"123"})
this.$http.all([res1, res2]).then(this.$http.spread(res1, res2) => {
  // 两个请求的返回结果在 res1 和 res2 中
})

到此这篇关于Vue使用axios发送请求并实现简单封装的文章就介绍到这了,更多相关Vue axios发送请求封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ElementUI实现在下拉列表里面进行搜索功能详解

    ElementUI实现在下拉列表里面进行搜索功能详解

    有时候需要用到下拉列表全选和搜索,下面这篇文章主要给大家介绍了关于ElementUI实现在下拉列表里面进行搜索功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue中Axios中取消请求及阻止重复请求的方法

    Vue中Axios中取消请求及阻止重复请求的方法

    为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,重复发送多次请求,本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法,感兴趣的可以了解一下
    2022-02-02
  • vue2.x中的provide和inject用法小结

    vue2.x中的provide和inject用法小结

    这篇文章主要介绍了vue2.x中的provide和inject用法小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    在vue中实现某一些路由页面隐藏导航栏的功能操作

    这篇文章主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 如何在 Vue 中使用 Axios 异步请求API

    如何在 Vue 中使用 Axios 异步请求API

    Axios 是 Javascript 中最受欢迎的 HTTP 库之一,我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用,可以用这个小程序学习英语,同时也能从侃爷的话中得到一些启发,而且还可以学习用 Vue 异步请求API,一举多得,何乐而不为呢?
    2021-05-05
  • Vue3 echarts组件化及使用hook进行resize方式

    Vue3 echarts组件化及使用hook进行resize方式

    这篇文章主要介绍了Vue3 echarts组件化及使用hook进行resize方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 关于在vscode使用webpack指令显示

    关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)

    这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法,需要的朋友可以参考下
    2021-07-07
  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,我也是无力吐槽,但是既然入了前端的坑就得认嘛,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下。
    2017-02-02
  • 深入了解Vue中双向数据绑定原理

    深入了解Vue中双向数据绑定原理

    vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。本文将通过示例详解其中原理,需要的可以参考一下
    2022-05-05
  • Vue页面偶尔样式错乱,刷新即恢复的问题及解决

    Vue页面偶尔样式错乱,刷新即恢复的问题及解决

    这篇文章主要介绍了Vue页面偶尔样式错乱,刷新即恢复的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论