vue打包后axios返回html,Vue之封装axios为插件使用

不管用什么方式获取数据，对于一个项目来说，代码一定要利于维护其次是一定要写的优美，因此加上一层封装是必要的

vuejs2.0 已经不再维护 vue-resource，vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios

的主要原因：

基本的封装要求：

统一 url 配置

统一 api 请求

request (请求)拦截器，例如：带上token等，设置请求头

response (响应)拦截器，例如：统一错误处理，页面重定向等

根据需要，结合 Vuex 做全局的loading动画，或者错误处理

将 axios 封装成 Vue 插件使用

文件结构

使用

vue-cli 进行相关的封装，在 src 文件夹下：

src

|

--

http 封装axios模块文件夹

|

---- config.js axios的默认配置

---- api.js 二次封装axios，拦截器等

---- interface.js 请求接口文件

---- index.js 将axios封装成插件

config.js

默认配置参照 gitHub，以下只做示例：

export default {

method: 'post',

// 基础url前缀

baseURL: 'https://easy-mock.com/mock/5ad75e9f41d4d65f0e935be4/example',

// 请求头信息

headers: {

'Content-Type':'application/json;charset=UTF-8'

},

// 参数

data: {},

// 设置超时时间

timeout: 10000,

// 携带凭证

withCredentials: false,

// 返回数据类型

responseType: 'json'

}

api.js

import axios from 'axios' // 注意先安装哦

import config from './config.js' //