1.新建文件夹 network 在文件新建 request.js

request.js:

import axios from 'axios'

export function request (config) {
// 1创建axios实例
const intstance = axios.create({
baseURL: 'https://localhost:44314',
timeout: 5000
// contentType: 'application/json;charset=UTF-8',
// dataType: 'json'
}) // 1.axios拦截器
intstance.interceptors.request.use(config => {
return config
}, er => {}) // 1.axios响应拦截拦截
intstance.interceptors.response.use(res => {
return res
}, er => {
}) return intstance(config) } export default request //导出

2.main.挂载配置

import request from '@/network/request'

new Vue({
el: '#app',
router,
store,
request, // 封装的axios
components: { App },
template: '<App/>' })

3.在需要使用axios的vue组件调用

import request from '@/network/request'

  request({ // 查询所有
url: '/api/Gj'
}).then(res => {
this.tableData = res.data
}) request({ // 条件查询
url: '/api/Gjtype/' + gjtype
}).then(res => {
this.tableData = res.data
}) request({ // 添加
url: '/api/Gj',
method: 'POST',
data: {
'id': 0,
'method': this.method,
'text': this.content,
'type': this.value
}
}).then(res => {
console.log(res)
if (res.status === 201) {
this.open1()
console.log('成功')
} else {
this.open4()
console.log('失败')
}
}).catch(console.error.bind(console)) // 异常 request({// 更新
url: '/api/Gj/' + this.id,
method: 'put',
data: {
'id': this.newinfo.id,
'method': this.newinfo.method,
'text': this.newinfo.text,
'type': this.newinfo.type
}
}).then(res => {
if (res.status === 204) {
this.open1()
console.log('成功')
} else {
this.open4()
console.log('失败')
}
}).catch(console.error.bind(console)) // 异常

axios模块封装的更多相关文章

  1. axios模块封装和分类列表实现

    这个作用 主要还是为了让代码更加的,清晰. 不要全部都放到  created(){}  这个方法下面.把这些代码全部抽离出去. 这里就只是去调用方法.1. src 目录下,新建文件夹---  rest ...

  2. Vue + Element UI 实现权限管理系统(工具模块封装)

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  3. Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

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

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

  5. 聊聊 Vue 中 axios 的封装

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

  6. vue中axios的封装以及简单使用

    一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...

  7. python解析xml模块封装代码

    在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...

  8. 简易的highcharts公共绘图模块封装--基于.net mvc

    运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...

  9. Java 9 揭秘(9. 打破模块封装)

    Tips 做一个终身学习的人. 在此章节中,主要介绍以下内容: 什么是打破模块的封装 如何使用命令行选项将依赖项(添加需要)添加到模块 如何使用--add-exports命令行选项导出模块的未导出包, ...

随机推荐

  1. 变量、数据类型、python内存管理

    pycharm快捷键 ctrl + c 复制, 默认复制整行 ctrl + v 粘贴 ctrl + x 剪切 ctrl + a 全选 ctrl + z 撤销 ctrl + f 查找 ctrl + sh ...

  2. 2019CCPC 秦皇岛 E.Escape

    传送门 题意: 给出一个\(n*m\)的迷宫,有\(a\)个入口,\(b\)个出口. 现在有\(a\)个机器人都从入口出发,一开始方向默认为下,你可以选在在一些格子上面放置一个转向器,转向器有四种: ...

  3. Django简介(MVC、MTV)

    Django简介 MVC Model(模型)- 应用程序中处理数据逻辑部分且与数据库交互,用于存取数据的部分 View(视图)- 用于处理后的数据界面展示,且视图通常是由模型数据创建的,是用户看到并与 ...

  4. CF261E Maxim and Calculator

    CF261E Maxim and Calculator 洛谷评测传送门 题目描述 Maxim has got a calculator. The calculator has two integer ...

  5. python字符串连接的三种方法

    1.+号连接 a="hello," b="world!" c=a+b print(c) 有一点需要注意的是,字符串类型是不可变的,所以每一次应用加号连接字符串都 ...

  6. How to display `top` results sorted by memory usage in real time?

    If you're using the top that comes with Ubuntu (top -v = procps-ng version 3.3.10), then you can use ...

  7. Newcoder 小白月赛20 H 好点

    Newcoder 小白月赛20 H 好点 自我感觉不错然后就拿出来了. 读读题之后我们会发现这是让我们求一堆数,然后这些数一定是递减的. 就像这样我们选的就是框起来的,然后我们可以看出来这一定是一个单 ...

  8. Log-Structured Merge Tree (LSM Tree)

    一种树,适合于写多读少的场景.主要是利用了延迟更新.批量写.顺序写磁盘(磁盘sequence access比random access快). 背景 回顾数据存储的两个“极端”发展方向 加快读:加索引( ...

  9. [LeetCode] 221. Maximal Square 最大正方形

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  10. 第09组 Beta冲刺(3/5)

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 还剩下哪些任务 ...