[web 前端] 封装简单的axios库
2023-09-14 08:56:58 时间
转载自https://blog.csdn.net/qq_35844177/article/details/78809499
1.新建http.js文件,封装axios get post 方法
import axios from 'axios' import qs from 'qs' import 'es6-promise' axios.defaults.baseURL = '/api'; export function get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } export function post(url, data) { return new Promise((resolve, reject) => { axios.post(url, qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded', } } ).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) }
2.新建api.js文件,封装调用的接口
import {get, post} from './http' export function getNewPublish() { const result = get('/ad/newestPublishAdMaterialInfo1'); return result; }
3.在组件中使用
import {getNewPublish} from '../../api/api' let result = getNewPublish(); result.then(res => { console.log(res); }).catch(err => { console.log(err); })
4.加拦截器的封装
import axios from 'axios' import qs from 'qs' import {Toast} from 'antd-mobile' axios.defaults.baseURL = '/api'; // 拦截请求 axios.interceptors.request.use(function (config) { Toast.loading('加载中', 0); return config }); // 拦截相应 axios.interceptors.response.use(function (config) { Toast.hide(); return config }); export default class Http { static get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } static post(url, params) { return new Promise((resolve, reject) => { axios.post(url, qs.stringify(params), { headers: { 'Content-Type': 'application/x-www-form-urlencoded', } } ).then(res => { resolve(res.data) }).catch(err => { reject(err) }) }) } }
相关文章
- [web] 使用Promise封装fetch实现网络超时,终止请求的功能
- 【Web Audio API】 — 那些年的 web audio
- 【CTF WEB】ISCC 2016 web 2题记录
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- SSH, 整合分页功能,连带DAO经典封装
- Robot Framework封装的关键字输入参数可以传入多个值的方法
- 在C#代码中应用Log4Net(五)将Log4Net正确地封装在自己的类库中并进行调用
- 录音权限判断封装类
- C#.NET万能数据库访问封装类(ACCESS、SQLServer、Oracle)
- 音视频封装格式和编码格式
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx Atitit web开发之道 attilax著 Web应用 1. 第1章 Web编程基础知识 (
- Atitit 2016 技术趋势与没落技术 目录 1.1. 离线优先Web应用程序(Offline first web applications)1 1.2. 依照产品而不是项目(product
- Atitit 部署了个webdav服务 as root 目录 1.1. WEB-INF copy to root dir only a web.xml use...1 1.2. Java.ba
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- js jquery vue 网络请求封装 服务器 后台
- FFMPEG视频编码封装
- c++ Opencv物体检测封装(级联训练分类器方式检测)
- LabVIEW什么时候需要使用DLL封装 Calling External APIs
- 项目中封装的一些公用方法
- JavaWeb课程复习资料(六)——DAO与DAOImpl层封装
- 二、各种贴片元件封装的尺寸数据