vue 组件的封装之基于axios的ajax请求方法

如下所示：

import Vue from 'vue'

let service = {
 url: 'http://host.xxxxx.com/xxx.php'
}

service.ajaxReuqest = (url, options, type, fileFlag) => {
 for (const i in options) {
 if (!options[i] && options[i] !== 0 && (options[i].length && options[i].length > 0)) {
  delete options[i]
 }
 }
 let promise = new Promise((resolve, reject) => {
 if (fileFlag) {
  Vue.axios.post(url, options, {
  headers: {
   'Content-Type': 'multipart/form-data'
  }
  }).then((res) => {
  resolve(res)
  })
 } else if (type === 'GET') {
  Vue.axios.get(url, { params: options }).then((res) => {
  resolve(res.data.resultObj)
  }).then((err) => {
  reject(err)
  })
 } else {
  Vue.axios.post(url, options).then((res) => {
  resolve(res)
  }).then((err) => {
  reject(err)
  })
 }
 })
 return promise
}

支持POST GET请求以及图片上传，基于axios，适用于vue,

以异步获取省份列表作为例子：

// 获取省份信息
service.getProvinceList = (options) => {
 return service.ajaxRequest(service.url + '/basic/getProvinceList', options, 'POST')
}
getProvinceList () {
 service.getProvinceList({}).then((res) => {
  this.provinceList = res.data.resultObj.data
 })
}

以上这篇vue 组件的封装之基于axios的ajax请求方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • 浅谈在Vue-cli里基于axios封装复用请求

    浅谈在Vue-cli里基于axios封装复用请求

    本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下: 安装 只用安装一个axios就可以了. npm install axios --save 接口代理设置 为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的. //文件位置:config/index.js proxyTable: { '/api': { target: 'http://47.9

  • 基于axios封装fetch方法及调用实例

    基础axios用法请看axios官网 //依赖于axios对私有ajax进行修改 import Qs from 'qs' import axios from 'axios' import router from 'router/index' import {errorPrompt, loading, closeLoading} from 'util/util' export const status = { SUCCESS: '100', NET_ERR: '101', // 网络连接异常,请稍

  • 关于vue中的ajax请求和axios包问题

    在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 今天我说的是axios的post请求 github源文件及文档地址:[https://github.com/axios/axios] + 首先,引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import a

  • vue 组件的封装之基于axios的ajax请求方法

    如下所示: import Vue from 'vue' let service = { url: 'http://host.xxxxx.com/xxx.php' } service.ajaxReuqest = (url, options, type, fileFlag) => { for (const i in options) { if (!options[i] && options[i] !== 0 && (options[i].length &&

  • 基于Axios 常用的请求方法别名(详解)

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 常用的请求方法别名一般有: Get/post/http协议请求 执行Get请求 function get(){ return axios.get('/data.json', { params:{ id:1234 } }).then(function (response) { console.log(response); }) .catch(function (error) { console.log

  • vue2.0 自定义组件的方法（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据

  • 将Vue组件库更换为按需加载的方法步骤

    本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大. 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法. index.js import Button from "./button"; import Table from "./table"; imp

  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    目录 使用axios发送post请求 首先需要安装对应的第三方包 发送post请求 发送get请求将index.js中再添加如下代码 vue使用axios的踩坑记录 axios跨域 解决方法 axios发起post请求后端无法接收数据 使用axios发送post请求 react  同样适用 首先需要安装对应的第三方包 cnpm  i  -S axios cnpm  i  -S lodash 然后在做下边的 在vue 项目中创建一个这样的文件目录 发送post请求 index.js中的文件内容是:

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • 详解封装基础的angular4的request请求方法

    为什么要封装呢? angular4自身提供的请求方法是用Observable来实现的.用的是观察者模式,个人认为这用来写请求是非常方便的. 一个项目里会有非常多的不同的请求,但是其实每个请求都会有些共性.比如:每个请求都要传Authorization,比如每个请求都要先判断后台返回的status字段为200时才是请求成功,后台正真返回的数据在data字段里,比如对于错误信息的处理都是一样的......等等. 所以我们需要封装出一个请求,去统一处理这些问题,从而保证组件里调用请求方法的时候收到的值

  • Vue发送ajax请求方法介绍

    Vue发送ajax请求方法介绍

    一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-resource --save step2:引入 [main.js] // 引入vue-resource import VueResource from 'vue-resource' // 使用vue-resource Vue.use(VueResource) step3:编码 [格式:] this.$

  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    以下代码如果需要在你本地跑起来: Ⅰ.需要apache服务,并把php代码丢进去指定位置 Ⅱ.将下面http://www.test.com/day05/jiekou.php地址,改成自己指定位置的域名或ip 1.从一段简易代码说起 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

随机推荐