照例先贴上 axios 的 gitHub 地址

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

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'
}

PS: 这里推荐一下一款 Mock 工具 Easy Mock,以上请求地址来自该工具。以后有空会单独写一下怎么使用该工具。

api.js

import axios from 'axios' // 注意先安装哦
import config from './config.js' // 倒入默认配置
import qs from 'qs' // 序列化请求数据，视服务端的要求export default function $axios (options) {return new Promise((resolve, reject) => {const instance = axios.create({baseURL: config.baseURL,headers: {},transformResponse: [function (data) {}]})// request 拦截器instance.interceptors.request.use(config => {// Tip: 1// 请求开始的时候可以结合 vuex 开启全屏的 loading 动画// Tip: 2 // 带上 token , 可以结合 vuex 或者重 localStorage// if (store.getters.token) {//     config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改// } else {//     // 重定向到登录页面    // }// Tip: 3// 根据请求方法，序列化传来的参数，根据后端需求是否序列化if (config.method.toLocaleLowerCase() === 'post' || config.method.toLocaleLowerCase() === 'put' || config.method.toLocaleLowerCase() === 'delete') {config.data = qs.stringify(config.data)}return config},error => {// 请求错误时做些事(接口错误、超时等)// Tip: 4// 关闭loaddingconsole.log('request:', error) //  1.判断请求超时if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')// return service.request(originalRequest);//例如再重复请求一次}//  2.需要重定向到错误页面const errorInfo = error.responseconsole.log(errorInfo)if (errorInfo) {// error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.rejectconst errorStatus = errorInfo.status; // 404 403 500 ... 等router.push({path: `/error/${errorStatus}`})}return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息})// response 拦截器instance.interceptors.response.use(response => {let data;// IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)if(response.data == undefined){data = response.request.responseText} else{data = response.data}// 根据返回的code值来做不同的处理（和后端约定）switch (data.code) {case '':break;default:}// 若不是正确的返回code，且已经登录，就抛出错误// const err = new Error(data.description)// err.data = data// err.response = response// throw errreturn data},err => {if (err && err.response) {switch (err.response.status) {case 400:err.message = '请求错误'breakcase 401:err.message = '未授权，请登录'breakcase 403:err.message = '拒绝访问'breakcase 404:err.message = `请求地址出错: ${err.response.config.url}`breakcase 408:err.message = '请求超时'breakcase 500:err.message = '服务器内部错误'breakcase 501:err.message = '服务未实现'breakcase 502:err.message = '网关错误'breakcase 503:err.message = '服务不可用'breakcase 504:err.message = '网关超时'breakcase 505:err.message = 'HTTP版本不受支持'breakdefault:}}console.error(err)// 此处我使用的是 element UI 的提示组件// Message.error(`ERROR: ${err}`);return Promise.reject(err) // 返回接口返回的错误信息})//请求处理instance(options).then((res) => {resolve(res)return false}).catch((error) => {reject(error)})})
}

interface.js

import axios from './api' // 倒入 api/* 将所有接口统一起来便于维护* 如果项目很大可以将 url 独立成文件，接口分成不同的模块* 此处的数据依然来自 Easy Mock*/// 单独倒出
export const query = params => {return axios({url: '/query',method: 'get',params})
}export const mock = params => {return axios({url: '/mock',method: 'get',params})
}export const upload = data => {return axios({url: '/upload',method: 'post',data})
}// 默认全部倒出
// 根绝需要进行
export default {query,mock,upload
}

index.js

封装成 Vue 插件，便（提）于（高）使（B）用（格）

// 倒入所有接口
import apiList from './interface'const install = Vue => {if (install.installed) return;install.installed = true;Object.defineProperties(Vue.prototype, {// 注意哦，此处挂载在 Vue 原型的 $api 对象上$api: {get() {return apiList}}})
}export default install

使用

到此为止，万事俱备就差用了，在 mian.js 中做如下操作：

// 倒入 http 文件夹下的 index.js
import api from './http/index'
Vue.use(api)// 此时可以直接在 Vue 原型上调用 $api 了

总结

以上二次封装较为全面，基本完成了我们之前的需求
在错误的处理上还需要与后端协定好返回值，做具体的约定
封装回调有点多，在使用的时候也需要加上 then() 来处理结果，async & await 了解一下哟，好东西当然要藏起来，我才不会分享出来呢...

PS: IE9 不支持 Promise 哦，需要安装一个 polyfill

import 'babel-polyfill'

小礼物走一走，来简书关注我

赞赏支持

Vue

举报文章

关注落叶追风

写了 11334 字，被 52 人关注，获得了 106 个喜欢

这个人简介过于个性，无法显示，请点击刷新...

喜欢

下载app生成长微博图片

更多分享

登录后发表评论

18条评论只看作者关闭评论

按时间倒序按时间正序

MissSixty

7楼 · 2019.01.21 08:57

感谢，非常有用！

赞回复

huranjs

6楼 · 2018.08.01 17:45

每次请求接口create一个实例，不怕接口很多，内存不会溢出么？

赞回复

夜半蛐蛐声

5楼 · 2018.07.16 22:12

大佬，能否耽搁你一点宝贵时间帮我解惑下，不会用

赞回复

落叶追风：

@howezhong 举个例子：在interface.js里面定义了两个请求（post,get）各一个
export const httpGet = params => {
return axios({
url: '/xxx',
method: 'get',
params
})
}

export const httpPost = data => {
return axios({
url: '/xxx',
method: 'post',
data
})
};
在某个vue组件内可以直接这么使用：
this.$http.httpGet({name: 'xxx', age: 'xx'}).then((res) => {
// ...res
})或者
this.$http.httpPost({name: 'xxx', age: 'xx'}).then((res) => {
// ...res
})

2018.07.17 22:49 回复

夜半蛐蛐声：

谢谢大佬

2018.07.18 22:03 回复

夜半蛐蛐声：

@howezhong 我试试

2018.07.18 22:03 回复

爬坑的乌龟：

@落叶追风 this.$http? 不应该是this.$api?

2018.07.20 13:56 回复

添加新评论收起

淘淘笙悦

4楼 · 2018.06.26 15:50

写的很好，感谢分享。
学习前端的朋友可以关注公众号「淘淘笙悦」，
让我们在前端的路上一起学习进步。

赞回复

yatang

3楼 · 2018.05.29 18:29

怎么用啊。在main.js里面use之后在其他组件怎么用呢

赞回复

落叶追风：

参考上面的index.js文件，我们把所有的interface.js里的接口都挂在$api上，并且将$api挂在了Vue原型上，因此不管在在那个组件里，你可以直接通过this.$api.<some api in interface.js>的方式调用，如果还不清楚的话可以继续留言，我给你写个例子

2018.05.29 20:22 回复

yatang：

@落叶追风亲，我用 this.$api.appAccessToken ，
appAccessToken 是interface.js里其中一个接口，
打印出来的是一个 function。

打印出来的信息我贴下 :

ƒ appAccessToken(params) {
return Object(__WEBPACK_IMPORTED_MODULE_0__api__["a" /* default */])({
url: '/epc/noLogin/appAccessToken',
method: 'get',
params: params
});
}

2018.05.30 11:04 回复

落叶追风：

@yatang 你能给我看下你怎么调用的么？贴下代码还有就是你在什么地方打印的

2018.05.30 11:11 回复

yatang：

@落叶追风下面是我调用的代码

<template>
<v-container fluid>
<v-slide-y-transition mode="out-in">
<v-layout column align-center>
<img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5">
<blockquote>
“First, solve the problem. Then, write the code.”
<footer>
<small>
<em>—John Johnson</em>
</small>
</footer>
</blockquote>
</v-layout>
</v-slide-y-transition>
</v-container>
</template>

<script>
export default {
created() {
var _this = this;
_this.testRequest();
},
methods: {
testRequest() {
var _this = this;
console.log(_this.$api.appAccessToken, 'test');
}
}
};
</script>

2018.05.30 11:13 回复

落叶追风：

@yatang this.$api.appAccessToken是你自己封装的接口，在interface.js里暴露出来的都是promise对象，因此你应该这么使用： this.$api.appAccessToken({'这里是参数': '参数值'}).then(function(res){// 成功的回调}).catch(function(err) {// 失败的回调，如果你在拦截器里做了统一处理，那么所有的catch都不需要写了})

2018.05.30 11:20 回复

yatang：

@落叶追风搜嘎，已解决。我试过 this.$api.appAccessToken().then(function(res){// 成功的回调}) 这样写，但是报错 this.$api.appAccessToken is not a function 。所以就一直迷茫。感谢耐心的讲解，加关注了，么么哒...

2018.05.30 11:39 回复

落叶追风：

@yatang 兄弟，么么哒过分了啊，加油共同进步嘛

2018.05.30 12:03 回复

添加新评论收起

作者：落叶追风
链接：https://www.jianshu.com/p/d21da2bb22f5
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Vue二次封装axios为插件使用相关推荐

vue项目内封装axios.，使用Mock，搭建前后端分离环境。Axios + Promise + Mock
1.安装Mock npm install mockjs --save-dev 1.1加入相关Mock代码在SRC目录下创建文件夹mock,在里面创建虚拟接口地址及数据: // mock/index. ...
简单的二次封装axios中的get，post方法
function Axios(type, url, data, header) {/*** 参数:* 1.type:调用axios的方法(get,post--)* 2.url:请求地址* 3.data ...
axios二次封装以及API接口统一管理
前端向服务器发送请求,使用的方法有很多: XMLHttpRequest.fetch.JQ.axios 1.axios二次封装二次封装axios是为了请求拦截器.响应拦截器. 请求拦截器:可以在发送请 ...
vue项目请求封装；axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
面试官：为啥要axios 的二次封装呢及其使用是干啥的
一.为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加.api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 举个例子,当axios发生问题存在重 ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
vue：axios二次封装，接口统一存放
https://www.jianshu.com/p/9077baa9d543 一.基于框架:vue 二.基于http库:axios 三.基本用法: 1.通过node安装: npm instal ...
Vue——axios的二次封装
文章目录一.请求和传递参数 1.get 请求 2.post 请求 3.axios 请求配置二.axios 的二次封装 1.配置拦截器 2.发送请求三.API 的解耦 1.配置文件对应的请求 2. ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

Vue二次封装axios为插件使用

基本的封装要求：

文件结构

config.js

api.js

interface.js

index.js

使用

总结

Vue二次封装axios为插件使用相关推荐

最新文章

热门文章