vue2中axios封装

一、先创建三个文件：

api.js 存放接口列表的
http.js 封装axios的
config.js axios的一些配置项

二、config.js

一些基础的配置，如果有其他需求可以自己添加

// import { getSession } from '@/utils';const config = {baseURL: 'http://192.168.110.250:3000',timeout: 15000,headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},// 自定义全局请求头// headerHandlers: [//   () => new Promise((resolve) => {//     const userInfo = getSession('userInfo');//     resolve({'session': userInfo ? userInfo.session : ''});//   })// ],
}export default config;

三、api.js

存放接口的文件，如果接口有很多，可以分模块新建几个js再往里面引入

const apiArr = [// {//   name: "test", // 接口调用方法名//   path: '/api/test', // 后端路径//   method: "POST", // 默认POST//   headers: {"token": 123}, // 自定义单个接口的请求头//   desc: "登录接口", // 接口描述// }{name: "login",path: '/api/login',desc: "登录接口",}
]export default apiArr;

四、http.js

import axios from 'axios';
import axiosConfig from './config'; // axios请求配置
import apiArr from './api'; // 用户请求集合
import qs from 'qs';
import { Message } from 'element-ui';// 创建axios实例
const service = axios.create({baseURL: axiosConfig.baseURL,timeout: axiosConfig.timeout,headers: axiosConfig.headers
});// 添加请求拦截器
service.interceptors.request.use(function (config) {//  promise动态添加请求头，加完之后再return出config继续请求const headerHandlers = (axiosConfig.headerHandlers || []).map(handler => {return handler(config).then((mixHeaders) => Object.assign(config.headers || {}, mixHeaders))});return Promise.all(headerHandlers).then(() => config);
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
service.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;
}, function (error) {// 对响应错误做点什么Message.error(error.message)return Promise.reject(error);
});// 创建请求
const USE_DATA_METHODS = ['POST', 'PUT', 'PATCH', 'DELETE'];
const createRequest = () => {const hostApi = {};apiArr.forEach(api => {hostApi[api.name] = (params) => {const method = api.method || "POST";const requestParams = USE_DATA_METHODS.includes(method) ? { data: qs.stringify(params) } : { params: params };return service({url: api.path,method,headers: {...api.headers},...requestParams,})}});return hostApi;
}const apis = createRequest();export default apis;

五、调用

封装完成后，在main.js里把接口挂到Vue上面

import apis from './request/http';
Vue.prototype.apis = apis;

然后页面里调用

vue2中axios封装相关推荐

vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
VUE2中axios的使用方法
一,安装 npm install axios 二,在http.js中引入 import axios from 'axios'; 三,定义http request 拦截器,添加数据请求公用信息 1 ax ...
axios get 某个参数是数组怎么传_Vue 中 Axios 的封装和 API 接口的管理
我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios ...
拦截器读post参数导致接口post请求报错_vue中Axios的封装和API接口的管理
一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响 ...
$.post请求的参数在后台代码中得到为null_vue中Axios的封装和API接口的管理
来源:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axio ...
router中获取vuex_Vue 中 Axios 的封装和 API 接口的管理
(给JavaScript加星标,提升前端技能) 作者:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U ...
axios post object object_一套全面又有实际意义的axios封装+api管理方案
[toc] 前言功能点此文主要是基于vuecli3项目中axios封装及api管理的实践记录及过程中的踩坑收获,功能基本都是根据工作中需求实现.需求背景是,在同一套请求配置下,实现以下主要功能: ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...

vue2中axios封装

一、先创建三个文件：

二、config.js

三、api.js

四、http.js

五、调用

vue2中axios封装相关推荐

最新文章

热门文章