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

目录
  • 一、安装axios
  • 二、简单使用
    • 1.配置
    • 2.发送请求
  • 三、封装使用
    • 1.创建js封装类
    • 2.配置
    • 3.发送请求

一、安装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发送请求封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中axios封装使用的完整教程

    前言 如今,在项目中,普遍采用Axios库进行Http接口请求.它是基于promise的http库,可运行在浏览器端和node.js中.此外还有拦截请求和响应.转换JSON数据.客户端防御XSRF等优秀的特性. 考虑到各个项目实际使用时写法混乱,不统一.对Axios进行一下通用化的封装,目的是帮助简化代码和利于后期的更新维护,尽量通用化. 方法如下 1. vue安装axios npm install axios -S 或者 npm i axios -S 2. 在main.js进行全局引入 imp

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • vue封装axios的几种方法

    基础版 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象.我平常elementUI用的比较多,这里你也可以使用自己的UI库. import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径,这里也可以使用env来判断环境 let

  • 如何用vue封装axios请求

    如何用vue封装axios请求

    其实vue封装axios是很简单的 首先 在src路径下建http文件夹 并且创建api.js env.js request.js 这三个文件 env.js文件 这个文件主要就是封装我们的公共地址 export default { // 开发环境 dev: { baseUrl: "开发环境公共地址" }, // 测试环境test test: { baseUrl: "测试环境公共地址" }, //线上接口 prod: { baseUrl: "线上环境公共地址

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

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

    目录 一.安装axios 二.简单使用 1.配置 2.发送请求 三.封装使用 1.创建js封装类 2.配置 3.发送请求 一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto

  • Vue使用axios发送请求简单实现代码

    上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装,但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的,也就是说VC中的函数无法直接的由VM去接管执行,这时我们需要将这个请求的执行函数位置调到APP这个父组件上去,因为只有APP组件被所谓的VM给接管了的,其他的组件都是APP组件的子组件. 例:当我们在APP组件的子组件UserLogin组件中写到登录函数: login(){ console.log('登录') let params = {

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • 利用Pygame制作简单动画的示例详解

    利用Pygame制作简单动画的示例详解

    目录 前言 计时器 绘制精灵 加载精灵 完整代码 前言 实现一个帧动画,使用的一个图,根据不同的时间显示不同的图. 使用的就是如下所示的一张图,宽度780 * 300 ,使用加载图片 260 * 150来实现. pygame.init() screen = pygame.display.set_mode((400, 300), 0, 32) pygame.display.set_caption("动画") while True: for event in pygame.event.ge

  • Python实现ATM简单功能的示例详解

    Python实现ATM简单功能的示例详解

    目录 一.局部变量.全局变量 二.global关键字 三.编写ATM程序 要求 详细步骤 存在问题 改进 完整代码 一.局部变量.全局变量 1.什么是局部变量 作用范围在函数内部,在函数外部无法使用 2.什么是全局变量 在函数内部和外部均可使用 3.如何将函数内定义的变量声明为全局变量 使用global关键字,global变量 二.global关键字 思考: num=100 def testsA() print(num) def testB() num=200 print(num) testA(

  • Python人工智能构建简单聊天机器人示例详解

    目录 引言 什么是聊天机器人? 准备工作 创建聊天机器人 导入必要的库 定义响应集合 创建聊天机器人 运行聊天机器人 完整代码 结论 展望 引言 人工智能是计算机科学中一个非常热门的领域,近年来得到了越来越多的关注.它通过模拟人类思考过程和智能行为来实现对复杂任务的自主处理和学习,已经被广泛应用于许多领域,包括语音识别.自然语言处理.机器人技术.图像识别和推荐系统等. 本文将介绍如何使用Python构建一个简单的聊天机器人,以展示人工智能的基本原理和应用.我们将使用Python语言和自然语言处理

  • vue使用axios实现文件上传进度的实时更新详解

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 引入方式: $ npm install axios //使用淘宝源 $ cnpm install axios //或者使用cdn: <script s

  • axios中cookie跨域及相关配置示例详解

    前言 最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. 1. 带cookie请求 - 画个重点 axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决. 这个时候需要注意需要后端配合设置: header信息 Access-Control-Allow-Credentials:true Access

  • python3+telnetlib实现简单自动测试示例详解

    python3+telnetlib实现简单自动测试示例详解

    目录 1 telnetlib介绍 1.1 简介 1.2 库常用函数及使用 1.2.1 建立连接 1.2.2 发送命令 1.2.3 读取返回数据 1.2.4 关闭连接 1.3 使用示例 2 自动测试 1 telnetlib介绍 1.1 简介 官方介绍文档:telnetlib – Telnet 客户端 - Python 3.9.6 文档 telnetlib 模块提供一个实现Telnet协议的类 Telnet. 1.2 库常用函数及使用 1.2.1 建立连接 建立连接有两种方式:1.实例化函数的时候,

随机推荐