没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Vue二次封装二次封装axios为插件使用详解为插件使用详解
主要介绍了Vue二次封装axios为插件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
跟随小编过来看看吧
照例先贴上 axios 的 gitHub 地址
不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的
vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说:
基本的封装要求:基本的封装要求:
1. 统一 url 配置
2. 统一 api 请求
3. request (请求)拦截器,例如:带上token等,设置请求头
4. response (响应)拦截器,例如:统一错误处理,页面重定向等
5. 根据需要,结合 Vuex 做全局的loading动画,或者错误处理
6. 将 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: {},
资源评论
weixin_38692707
- 粉丝: 8
- 资源: 902
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功