Vue开发中整合axios的文件整理

前言

大家在vue日常开发中，不可避免要整合axios，这里简单记录一下整合中的文件，方便以后使用查找。下面来看看详细的介绍。

整合方法

整合文件axios.js

import axios from 'axios';
// 适配vue-resource
const instance = axios.create();
instance.interceptors.request.use(config=> {
//Serialize.decode(config);
return config;
});
instance.interceptors.response.use(response=> {
return response.data;
}, err=> {
if (err.response) {
axios.post('/v1/error', err.response);
return Promise.reject(err.response.data);
}
return Promise.reject({ code: 1024, message: err.message });
});
function plugin(Vue) {
if (plugin.installed) {
return;
}
Vue.http = instance;
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
export default plugin;

vue插件使用 app.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import { sync } from 'vuex-router-sync';
import router from './router';
import * as filters from './filters';
import yxui from 'yxui/dist/yxui.min';
import axios from './axios';
Vue.use(yxui);
Vue.use(axios);
// sync the router with the vuex store.
// this registers `store.state.route`
sync(store, router);
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
// create the app instance.
// here we inject the router and store to all child components,
// making them available everywhere as `this.$router` and `this.$store`.
const app = new Vue({
router,
store,
...App
});
// expose the app, the router and the store.
// note we not mounting the app here, since bootstrapping will be
// different depending on whether we are in browser or on the server.
export { app, router, store };

在vuex action 中使用：

actions: {
// adList
[TypesAds.AD_GET_LIST](ctx, params){
return Vue.http.get('/v1/api/ads/list', {params}).then(data=> {
ctx.commit(TypesAds.AD_GET_LIST, data);
return data;
}).catch(err=> {
//统一错误处理
Vue.$message.error(err.msg);
});
}
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 简单谈谈C++ 头文件系列之(iosfwd)

    简单谈谈C++ 头文件系列之(iosfwd)

    简介 输入输出历来都是语言的重要部分,在C++中,该库也是占据了相当大的一部分. C++的输入输出库是其遵循面向对象设计的结果,并结合了泛型编程. 以下是这些库类的关系图(箭头标示继承,白框表示摸板,黑框表示摸板实例): iosfwd声明 该文件的全称是"input output stream forward",即输入输出流前向声明. 顾名思义,该头文件的主要目的就是为用户提供所有输入输出类的声明. 当你在某些只需要这些类声明,而不需要定义的地方 (例如:自定义的头文件中),就可以简单

  • iOS利用AFNetworking3.0——实现文件断点下载

    iOS利用AFNetworking3.0——实现文件断点下载

    0.导入框架准备工作 1. 将AFNetworking3.0+框架程序拖拽进项目 2. 或使用Cocopod 导入AFNetworking3.0+ 3.  引入 #import "AFNetworking.h" 1.UI准备工作 A. 定义一个全局的 NSURLSessionDownloadTask:下载管理句柄 由其负责所有的网络操作请求 @interface ViewController () { // 下载句柄 NSURLSessionDownloadTask *_downloa

  • 详解IOS中文件路径判断是文件还是文件夹

    详解IOS中文件路径判断是文件还是文件夹 方法1 + (BOOL)isDirectory:(NSString *)filePath { BOOL isDirectory = NO; [[NSFileManager defaultManager] fileExistsAtPath:filePath isDirectory:&isDirectory]; return isDirectory; } 方法2 + (BOOL)isDirectory:(NSString *)filePath { NSNum

  • 浅谈iOS关于头文件的导入问题

    关于import和@class的使用问题 一.@class的出现可以适当减少编译时间,提高效率. 现在假设有两个类,一个是Teacher类,一个是Students类. Teacher类 #import <Foundation/Foundation.h> #import "Students.h" @interface Teacher : NSObject @property (copy,nonatomic)NSString *firstName; @property (cop

  • ios用AFN进行文件上传的示例代码

    App中个人信息页面,通常都会有设置头像的功能.当用户从相册中选择图像或者拍摄照片成功后,一般都需要将照片发送到服务器进行保存,以方便用户在其他设备或者再次登陆后,能再次从服务器请求到设置的照片.项目中通过AFN,实现起来很方便. - (void)upload{ NSData *imageData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"mine.jpeg" ofType:nil

  • iOS利用AFNetworking实现文件上传的示例代码

    0.导入框架准备工作 1. 将框架程序拖拽进项目 2.  添加iOS框架引用 –SystemConfiguration.framework –MobileCoreServices.framework 3.  引入 #import "AFNetworking.h" 4. 修改xxx-Prefix.pch文件 #import <MobileCoreServices/MobileCoreServices.h> #import <SystemConfiguration/Sys

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • Vue开发中整合axios的文件整理

    前言 大家在vue日常开发中,不可避免要整合axios,这里简单记录一下整合中的文件,方便以后使用查找.下面来看看详细的介绍. 整合方法 整合文件axios.js import axios from 'axios'; // 适配vue-resource const instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; })

  • vue开发中关于axios的封装过程

    目录 关于axios的封装 vue中axios全局封装 axios封装 api的统一管理 关于axios的封装 下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例: import axios from 'axios' import { BASE_URL } from './http' import router from '../router'   // create an axios instance const ser

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • 详解vue开发中调用微信jssdk的问题

    起因 微信分享网址时无法分享图片,这个问题需要用jssdk去解决.其实开始的时候时可以看到图片的,但后来微信禁止了.所以只能使用jssdk去解决. 普通网页开发很简单,但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了.只要url发生变化就会报签名错误.其实微信官方上已经写了说明. 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

  • 如何在Vue项目中使用axios请求

    在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装 首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题 如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =

  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    目录 一.axios是什么 特性 基本使用 二.为什么要封装 三.如何封装 设置接口请求前缀 设置请求头与超时时间 封装请求方法 请求拦截器 响应拦截器 小结 参考文献 一.axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分

  • vue项目中在外部js文件中直接调用vue实例的方法比如说this

    一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • Vue开发中常见的套路和技巧总结

    属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true

随机推荐