vue+axios方法封装(restful,ajax)

this.$get({url: '',data: {},success: (data) => {}})

import qs from 'qs'// axios网络请求
function ajax (Vue, axios) {if (ajax.installed) returnVue.prototype.$baseURL = axios.defaults.baseURL = (process.env.NODE_ENV === 'production') ? '/api/' : 'http://127.0.0.1:8080/api/'// 序列化对象Vue.prototype.$serialize = params => qs.stringify(params)Vue.prototype.$ajax = function (params, method = 'get') {let data = params['data'] || {}if (params['loading']) this.isLoading = truelet [getData, postData, headers] = [null, null, null]if (method === 'post') {postData = qs.stringify(data)headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}} else {getData = data}axios({method: method,url: params['url'],params: getData,data: postData,headers: headers,withCredentials: true}).then(res => {res = res.dataif (res.data.authorityCheckState === 1) this.$router.replace('login')else if (res.data.authorityCheckState === 2) this.$router.replace('login')if (params['loading']) this.isLoading = falseif (!res.status) {if (params['success'] !== undefined) params.success(res.data)} else {if (!params['fail']) this.$msg(res.message)else params.fail(res)}}).catch(err => {if (params['loading']) this.isLoading = falseif (params['error'] !== undefined) params.error(err)})}// get请求Vue.prototype.$get = function (params) {this.$ajax(params, 'get')}// post请求Vue.prototype.$post = function (params) {this.$ajax(params, 'post')}// put请求Vue.prototype.$put = function (params) {params.data['_method'] = 'PUT'this.$ajax(params, 'post')}// patch请求Vue.prototype.$patch = function (params) {params.data['_method'] = 'PATCH'this.$ajax(params, 'post')}// delete请求Vue.prototype.$delete = function (params) {this.$ajax(params, 'delete')}
}if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(ajax)
}export default ajax

vue+axios方法封装(restful,ajax)相关推荐

vue axios全局封装请求和 vue三种js跳转页面方式
axios全局封装请求第一步在src文件下新建api文件文件下新建request.js文件 // 导入axios import axios from "axios"; // 进 ...
用promise封装ajax_vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法方法一,在单个页面内使用封装的代码如下: beforeCreate () { this.$http = (() => ...
vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vue项目请求封装；axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...

vue+axios方法封装(restful,ajax)

vue+axios方法封装(restful,ajax)相关推荐

最新文章

热门文章