概要
封装axios让调用接口变得轻量、简单
先安装 axios
通过npm 或者 yarn安装 axios
1、通过npm安装axios
npm install axios
2、在主入口文件main.js中引用
import axios from 'axios'
Vue.use(axios);
3、创建文件夹http,再创建文件index.js进行封装
配置
请求拦截器和响应拦截器,请求前缀等
import axios from "axios";
const http = axios.create({
// baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。
// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
baseURL: "/api",
// timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）
timeout: 6000,
// headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。
headers: {
'X-Custom-Header': 'foobar',
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
const token = localStorage.getItem("Web-Token-stu")
if (token) {
config.headers["token"] = token// 请求头带上token
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
let subPart = encodeURIComponent(params) + '=';
url += subPart + encodeURIComponent(value[key]) + '&';
}
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
console.log("请求拦截器错误：", error)
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
console.log("响应拦截器错误：", error)
return Promise.reject(error);
});
/**
* 对外暴露封装的axios
* @param requestMode 请求方式
* @param url 后端url
* @param data 形参
*/
export default http
4、对封装的axios的接口的统一管理
创建
api目录,创建index.js文件
引入刚刚封装的
http文件文章来源：https://www.toymoban.com/news/detail-822461.html
import http from "@/http";
// 测试导出
export function exportExcelFile() {
return http({
url: "/plan/test",
method: "post",
responseType: 'blob',
data: data,
})
}
5、代码种对接口的调用
import exportExcelFile from "@/api/exportExcelFile"
exportExcelFile().then(res=>{
res.XXXX
})
本文要是对你有帮助的话，麻烦帮忙一键三联，关注下，谢谢。文章来源地址https://www.toymoban.com/news/detail-822461.html
到了这里，关于Vue对axios的封装及使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
