vue封装api怎么封装的啊（vue2项目中全局封装axios问题）
导读：vue2全局封装axios 封装axios...
vue2全局封装axios
封装axios
第一步
1.src 目录中新建utils文件夹 2.utils文件中建立http.js文件http.js文件的内容
//第一步导入axios
import axios from axios
import { Toast } from vant;
//第二步 我们可以声明一个新的常量axios 我们可以配置一些基础 公共的路径配置 比如说baseURL timeout请求失败超时报错 withcookies...之类的东西
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL//如果配置了环境变量就可以直接写/api,
withCredentials: true,
timeout: 3000//请求超时
})
//第三步 设置请求拦截
//新的常量axios service.拦截器.请求.使用===》 里头有两个参数 一个成功的回调函数 一个失败的回调函数
service.interceptors.request.use(config=>{
//每次发送请求要进行的公共操作 每次发送请求一般需要的操作一般都有 开启loading加载动画 token写在请求的头部 之类的
//loading
Toast.loading({
message: 加载中...,
forbidClick: true,
});
//最后的话一定要给他return出去 不return不执行
return config
},err=>{
//请求的时候如果发生错误了 ， 这边直接给它抛出错误就行
// throw new Error(err)抛出的是一个红色的报错方便我们查看寻找
throw new Error(err)
})
//第四步 设置响应拦截
service.interceptors.response.use(response=>{
//我们每次成功发送一个请求 它都会有响应的 参数也是两个
//一般成功之后可以清除或关闭loading动画 还可以判断一些状态码
//清除loading动画
Toast.clear()
//判断状态码
const res = response.data
if (res.status && res.status !== 200) {
// 登录超时,重新登录
if (res.status === 401) {
Toast.loading({
message: 登录超时 ，请从新登录,
forbidClick: true,
});
}
return Promise.reject(res || error)
} else {
return res.data
}
},err=>{
return Promise.reject(err)
})
//导出 导出这个模块
export default service
封装api 函数
第一步先在utils文件夹中新建api.js
api.js文件的内容
//这边的话 先导入封装好的新的axios
import service from ./http;
//然后我们可以封装一些接口函数 比如说 登录的 注册的 首页的 分类的 轮播的 //但是要确认参数传的是get还是post请求
//首页
export function getHome(data){
return service.get(/home,data)
}
//方便我们后期的维护 代码美观 方便快捷
//轮播
export function lunbo(data){
return service.get(/home/shejishi,data)
}
//比如说以后我们要维护封装好的接口 这样封装好后我们就不需要去组件里一个一个去找 ，直接来这个文件修改即可
//组件化开模块化发或者开发 它们都有一个原则
//高聚合 低耦合
//高聚合就是 一个组件的业务一定要聚合在一起 一个组件的业务越集中越好
//低耦合就是 组件和组件之间的耦合度一定要低 意思就是两个组件之间的牵连越少越好
vue2.X中axios简单封装和多功能封装
vue2.X 中axios的简单封装
简单封装说明了封装思路 ，适合小白但想尝试封装的人 。你可以在此基础上进行追加改造.
1.引入库
代码如下（示例）：
npm install axios
npm install element-ui -S
// 或者
yarn add axios
yarn add element-ui
2.创建封装文件 request.js
代码如下（示例）：
/**
* 全站http配置
*/
import axios from axios;
import { Message } from element-ui;
//默认超时时间
axios.defaults.timeout = 10000;
//返回其他状态码
axios.defaults.validateStatus = function (status) {
return status >= 200 && status <= 500;
};
//跨域请求 ，允许保存cookie
axios.defaults.withCredentials = true;
//http request拦截 ，此处用到es6 Promise
axios.interceptors.request.use(config => {
// 你可以通过config来配置请求头...
const meta = (config.meta || {});
//headers中配置text请求
if (config.text === true) {
config.headers["Content-Type"] = "text/plain";
}
//headers中配置serialize为true开启序列化
if (config.method === post && meta.isSerialize === true) {
config.data = serialize(config.data);
}
return config
}, error => {
return Promise.reject(error)
});
//http response 拦截 ，此处用到es6 Promise
axios.interceptors.response.use(res => {
//获取状态码
const status = res.data.code || res.status;
const message = res.data.msg || res.data.error_description || 未知错误;
//如果是401则跳转到登录页面
if (status === 401) {
//router.push({ path: /login }))
};
// 如果请求为非200否者默认统一处理
if (status !== 200) {
Message({
message: message,
type: error
});
return Promise.reject(new Error(message))
}
return res;
}, error => {
return Promise.reject(new Error(error));
});
export default axios;
3.使用方式
在vue项目的根目录下的main.js 正常引用就好啦
import request from ./api/request/request.js
Vue.prototype.request = request;
接下来去页面中调用 。这里唯一可能会犯错的地方
1. url路径的开头忘记加 / 了！ hhh 2. /api 不明白是干什么的 。其实这里是 devServer.proxy 的key
let _self = this;
let id = 123;
let name = abner;
let url = /api/blade-performance-mgt/hzy/performance/record/planSubmit; // 请求地址
// post 请求
_self.request
.post(url, {
id: id,
name: name ,
})
.then((res) => {
// res
});
// git 请求
let url = /api/blade-performance-mgt/hzy/performance/record/list; // 请求地址
_self.request.get(url)
.then((res) => {
// res
});
也发下vue.config.js的配置吧！
这里只需要看下devServer中的配置就行
module.exports = {
//路径前缀
publicPath: "/",
lintOnSave: true,
productionSourceMap: false,
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
vue: Vue,
vue-router: VueRouter,
vuex: Vuex,
axios: axios,
element-ui: ELEMENT,
});
const entry = config.entry(app);
entry.add(babel-polyfill).end();
entry.add(classlist-polyfill).end();
entry.add(@/mock).end();
},
css: {
extract: { ignoreOrder: true }
},
//开发模式反向代理配置 ，生产模式请使用Nginx部署并配置反向代理
devServer: {
port: 1888,
proxy: {
/api: {
//本地服务接口地址
// target: http://localhost,
//远程演示服务地址,可用于直接启动项目
target: http://10.1.100.248:8000/api,
// target: http://10.1.6.67:8033,
ws: true,
pathRewrite: {
^/api: /
}
}
}
}
};
多功能封装
这种为了更好的分离代码 ，需要创建两个文件interceptor.js和request.js
1.创建request文件夹 ，我的项目目录如下
interceptor.js 代码如下
/**
* Author：abner ，修改于5月28
* 生成基础axios对象 ，并对请求和响应做处理
* 前后端约定接口返回解构规范
* {
* code:200,
* data:"成功",
* msg: "操作成功"
* success: true
* }
*/
import axios from axios
import { Message } from element-ui
import { getToken } from @/util/auth; // 获取token值的方法 ，如何没有用token验证删掉即可
// 创建一个独立的axios实例
const service = axios.create({
// 设置baseUr地址,如果通过proxy跨域可直接填写base地址
baseURL: /api,
// 定义统一的请求头部
headers: {
// Authorization: ``, // 此处对应后台AOP验证,
Content-Type: application/json //默认方式提交数据
// Content-Type: application/x-www-form-urlencoded;charset=UTF-8 //表单方式提交数据
},
// 配置请求超时时间
timeout: 10000,
// 如果用的JSONP ，可以配置此参数带上cookie凭证 ，如果是代理和CORS不用设置
withCredentials: true
});
// 请求拦截
service.interceptors.request.use(config => {
// 在header中自定义token参数名：tokenHeader ，可添加项目token
config.headers[tokenHeader] = getToken()
return config;
});
// 返回拦截
service.interceptors.response.use((response) => {
// 获取接口返回结果
const res = response.data;
// code为200 ，直接把结果返回回去 ，这样前端代码就不用在获取一次data.
if (res.code === 200) {
return res;
} else if (res.code === 10000) {
// 10000假设是未登录状态码
Message.warning(res.msg);
// 也可使用router进行跳转
window.location.href = /#/login;
return res;
} else {
// 错误显示可在service中控制 ，因为某些场景我们不想要展示错误
// Message.error(res.message);
return res;
}
}, () => {
Message.error(网络请求异常 ，请稍后重试!);
});
export default service;
request.js中你需要知道的
这里需要说明的是请求方式那里的判断 ，我们需要知道axios不同请求方式默认传参的方式是不同的 ，比如：
1.post请求我们一般都用data:{} 这中方式传参
2.get请求我们一般都用params:{} 这中方式传参
又比如
//如果服务端将参数作为对象来封装接受
axios.delete(demo/url, {
data: {
id: 123,
name: Henry,
},
timeout: 1000,
...//其他相关配置
})
//如果服务端将参数作为url参数来接受 ，则请求的url为:www.demo/url?a=1&b=2形式
axios.delete(demo/url, {
params: {
id: 123,
name: Henry,
},
timeout: 1000,
...//其他相关配置
})
我们需要对不同的请求 ，不同的情况进行判断处理
request.js 代码如下
/**
* request.js
* 通过promise对axios做二次封装 ，针对用户端参数 ，做灵活配置
* Author：abner ，修改于5月28
*/
import { Message, Loading } from element-ui;
import instance from ./interceptor
/**
* 核心函数 ，可通过它处理一切请求数据 ，并做横向扩展
* @param {url} 请求地址
* @param {params} 请求参数
* @param {options} 请求配置 ，针对当前本次请求；
* @param loading 是否显示loading
* @param mock 本次是否请求mock而非线上
* @param error 本次是否显示错误
*/
function request(url, params, options = { loading: true, mock: false, error: true }, method) {
// let loadingInstance = ;
// 请求前loading
// if (options.loading) loadingInstance = Loading.service({background:transparent});
return new Promise((resolve, reject) => {
let data = {}
// get请求使用params字段
if (method == get) data = { params }
// post请求使用data字段
if (method == post) data = { data: params }
// delete请求使用params字段
if (method == delete) data = { params }
// 通过mock平台可对局部接口进行mock设置
if (options.mock) url = http://www.mock.com/mock/xxxx/api;
instance({
url,
method,
...data
}).then((res) => {
// 此处作用很大 ，可以扩展很多功能 。对返回的数据进行统一处理
if (res && res.code === 200) {
resolve(res.data);
} else {
// 通过配置可关闭错误提示
if (res && options.error) Message.error(res.msg);
reject(res);
}
}).catch((error) => {
Message.error(error.message)
}).finally(() => {
// loadingInstance.close();
})
})
}
// 封装GET请求
function get(url, params, options) {
return request(url, params, options, get)
}
// 封装POST请求
function post(url, params, options) {
return request(url, params, options, post)
}
// 封装DELETE请求
function Delete(url, params, options) {
return request(url, params, options, delete)
}
export default {
get, post, Delete
}
使用步骤
1.在main.js中添加
import request from ./api/request/request
Vue.prototype.request = request;
2.在方法中直接使用
methods: {
getUnitTabledata() {
let _self = this;
_self.request
.get("/lnjzxh-awards-mgt/lnjzxh/award/serial/unit/list/page", {
awardName: _self.searchName,
status: _self.statusValue,
account: _self.account,
createDate: _self.pickerValue,
current: _self.page.currentPage - 1,
size: _self.page.pageSize,
})
.then((res) => {
_self.page.total = res.total;
_self.tableData = res.records;
});
},
}
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！