vue axios 接口请求封装
主要区别是增加xhr.js 管理接口
一、封装文件 src/utils/request.js
import axios from "axios";
import { getToken } from "@u/auth";
/**
* 创建 axios 实例
*/
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
withCredentials: true, // 跨域请求时发送Cookie
timeout: 60000, // 请求超时
headers: {
"Content-Type": "application/json;q=1.0,*/*;q=0.1",
},
});
/**
* 全局 请求拦截器, 支持添加多个拦截器
* 例如: 配置token、添加一些默认的参数
* `return config` 继续发送请求
*/
service.interceptors.request.use(
(config) => {
// 设置Token
getToken() && (config.headers["X-Token"] = getToken());
return config;
},
(error) => {
// 做一些请求错误
console.error(error);
return Promise.reject(error);
}
);
/**
* 全局 响应拦截器, 支持添加多个拦截器
* 例如: 根据状态码选择性拦截、过滤转换数据
* @param {Object} res 请求返回的数据
* @return {Promise<reject>}
*/
service.interceptors.response.use(
async (res) => {
const { data, status } = res;
try {
return await handleCode({ data, status});
} catch (err) {
return Promise.reject(err);
}
},
(err) => {
return Promise.reject(err);
}
);
/**
* 处理 HTTP 状态码
* @param data {Object} 请求返回的数据
* @param status {String} HTTP状态码
* @param rHeader {Object} 响应头
* @returns {Promise<never>|*}
*/
function handleCode({ data, status}) {
const STATUS = {
"200"() {
return data;
},
"400"() {
return Promise.reject(new Error("请求错误"));
},
"401"() {
return Promise.reject(new Error("请求未授权"));
},
"403"() {
return Promise.reject(new Error("拒绝请求"));
},
"500"() {
return Promise.reject(new Error("服务器错误"));
},
};
// 有状态码但不在这个封装的配置里,就直接返回错误
return STATUS[status]
? STATUS[status]()
: Promise.reject(new Error(data.data || "请求错误"));
}
export { service as axios };
二、管理接口文件 src/utils/xhr.js
import { axios } from "@u/request";
/**
* get 请求方式
* @param url {String} 接口地址
* @param params {Object} 接口参数
* @returns {AxiosPromise}
* @constructor
*/
export function mGet(url, params) {
return axios({
url: url,
method: "get",
params,
});
}
/**
* post 请求方式
* @param url {String} 接口地址
* @param data {Object} 接口参数
* @returns {AxiosPromise}
* @constructor
*/
export function mPost(url, data) {
return axios({
url: url,
method: "post",
data,
});
}
/**
* put 请求方式-用于修改全部数据
* @param url {String} 接口地址
* @param data {Object} 接口参数
* @returns {AxiosPromise}
* @constructor
*/
export function mPut(url, data) {
return axios({
url: url,
method: "put",
data,
});
}
/**
* patch 请求方式-用于修改单项或多项数据
* @param url {String} 接口地址
* @param data {Object} 接口参数
* @returns {AxiosPromise}
* @constructor
*/
export function mPatch(url, data) {
return axios({
url: url,
method: "patch",
data,
});
}
/**
* delete 请求方式
* @param url {String} 接口地址
* @param params {Object} 接口参数
* @returns {AxiosPromise}
*/
export function mDelete(url, params) {
return axios({
url: url,
method: "delete",
params,
});
}
/**
* 下载文件
* @param url {String} 接口地址
* @param params {Object} 接口参数
* @returns {AxiosPromise}
* @constructor
*/
export function mDownload(url, params) {
return axios({
url: url,
method: "get",
params,
responseType: "blob",
});
}
/**
* 上传文件
* @param url {String} 接口地址
* @param data {Object} 接口参数
* @returns {AxiosPromise}
*/
export function mUpload(url, data) {
return axios({
url: url,
method: "post",
data,
headers: {
"Content-Type": "multipart/form-data",
},
timeout: 1000 * 60 * 4,
});
}
三、接口文件 src/api/user.js
import { mGet } from "@u/xhr";
const getUserInfo = (params) => mGet("/user/info", params);
export { getUserInfo };
四、使用示例
<template>
<div class="app-container"></div>
</template>
<script>
import { getUserInfo } from "@i/user";
export default {
name: "Users",
components: {},
data() {
return {
list: []
};
},
created() {
getUserInfo({ id: 1 }).then((res) => {
this.list = res.data;
});
},
methods: {},
};
</script>