vue axios设置同步请求（Vue前端开发数据交互axios）
vue axios设置同步请求（Vue前端开发数据交互axios）import axios from "axios"; const service = axios.create();异常提示及错误处理创建服务npm install axios --save当然了使用yarn 或者 bower都可以了，看自己用的什么包管理器就用什么安装，也可以直接用cdn一般我们封装可以划分为以下三步创建 service.js 文件
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
说明： 本文介绍Vue 开发中对axios 的封装处理，不对axios 概念详细介绍
项目api基本结构
api 目录结构
安装npm install axios --save
当然了使用yarn 或者 bower都可以了，看自己用的什么包管理器就用什么安装，也可以直接用cdn
封装请求一般我们封装可以划分为以下三步
- 请求拦截
- 数据相应
- 异常处理
创建 service.js 文件
创建服务
import axios from "axios";
const service = axios.create();
异常提示及错误处理
// 记录和显示错误
const TipLog = msg => {
Message({
message: msg
type: "warning"
showClose: true
});
};
const errorHandle = (status msg) => {
switch (status) {
case "exceeded":
TipLog(msg);
break;
case 400:
TipLog(`请求出错: ${msg}`);
break;
case 401:
TipLog(msg);
store.dispatch('ZAdmin/user/logout')
break;
case 403:
TipLog(`拒绝访问: ${msg}`);
break;
case 404:
TipLog("请求不存在");
break;
case 408:
TipLog("请求超时");
break;
case 426:
TipLog(`${msg}`);
break;
case 500:
TipLog(`服务器内部错误:${msg}`);
break;
case 501:
TipLog("服务未实现");
break;
case 502:
TipLog("网关错误");
break;
case 503:
TipLog("服务不可用");
break;
default:
TipLog(msg);
break;
}
};
请求拦截(如在请求前给headers中添加token）
service.interceptors.request.use(
request => {
const token = utils.cookies.get("token");
const isToken = (request.headers || {}).isToken === false
if (token && !isToken) {
request.headers['token'] = 'Bearer ' token// token
}
return request
}
)
响应处理 （首先判断http 请求是否成功，然后判断业务接口处理数据返回是否正常)
service.interceptors.response.use(
async response => {
const { status data } = response
if (status === 200) {
// 这儿业务接口处理成功数据状态码和后端讨论统一
if (data.code === 0) {
return data.data;
} else {
errorTipLog(data.msg)
return Promise.reject(data.msg);
}
} else {
errorTipLog(data.msg)
return Promise.reject(data.msg);
}
}
error => {
const { response } = error;
if (
error.code === "ECONNABORTED" &&
error.message.indexOf("timeout") !== -1
) {
// 接口请求超时处理，一般建议重新请求一次，根据系统架构确定
var originalRequest = error.config;
return axios.request(originalRequest);
// errorHandle("exceeded" "请求超时");
} else {
console.log(response 'response')
errorHandle(response.status response.data.msg);
}
return Promise.reject(error);
}
);
加载api
使用require.context 工程自动化导入所有的接口模块
import { request } from './service'
const files = require.context('./modules' false /\.js$/)
const apiGenerators = files.keys().map(key => files(key).default)
let api = {}
apiGenerators.forEach(generator => {
const apiInstance = generator({
request
})
for (const apiName in apiInstance) {
if (Object.prototype.hasOwnProperty.call(apiInstance apiName)) {
api[apiName] = apiInstance[apiName]
}
}
})
export default api
挂载api 到原型链上
main.js 中
import api from "@/api";
Vue.prototype.$api = api;api 模块写法
// 接口api
export default ({ request }) => ({
// get 方法
app_list(query = {}) {
return request({
url: "/url"
method: "get"
params: query
});
}
// 删除delete
app_del(query = {}) {
return request({
url: "/url"
method: "delete"
data: query
});
}
// 新增post
app_add(query = {}) {
return request({
url: "/url"
method: "post"
data: query
});
}
// 编辑 put
app_edit(query = {}) {
return request({
url: "/url"
method: "put"
data: query
});
}
});
具体参数传递处理是指定字段还是统一json ，看项目架构了
调用请求页面中就可以直接这样调用了，不用导入指定模块
this.$api.app_list().then(res=> {
console.log(res)
})
一般建议接口文件名称和页面模块相对应，这样找的时候可以很快找到，基础代码都在上面了，实际业务开发中还会进行扩展及处理，如批量请求等本文没有做封装处理，当然有些业务也不一定需要封装请求，具体根据架构处理。
