我们一般都是在做一个大型项目的时候，需要用到很多接口时，我们为了方便使用，就把接口封装起来。

先安装axios命令 ：npm install axios --save

那么思路是什么呢？

首先在src文件中创建新的文件夹，分别为http和api两个文件夹。

一：在http文件夹中新建一个http.js：

1.先引入axios ，然后设置环境

2.设置超时时间

3.设置不同的请求方式

二：在api文件夹新建api.js

获取接口

三：在组件中的引入

console.log（）出来就可以得到内容。

总结：

01.设置你接口的公共地址 axios.defaults.baseURL
02.可以根据不同环境（开发环境和生产环境）切换接口地址
03.可以设置请求超时时间 axios.defaults.timeout=3000
04.设置请求拦截 axios.interceptors.request和响应拦截 axios.interceptors.response
05.封装get 和post请求方式
创建一个api.js，根据业务逻辑封装请求的方式

axios封装接口的更多相关文章

  1. 【Vue】axios封装，更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  2. Vue+axios统一接口管理

    通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的a ...

  3. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  4. vue项目搭建 （二） axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. 使用Typescript重构axios(十一)——接口扩展

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. 原生js上传图片遇到的坑（axios封装）

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  7. vue-cli3中axios如何跨域请求以及axios封装

    1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...

  8. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

  9. axios取消接口请求

    axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...

随机推荐

  1. 炉石传说酒馆战棋一键拔线（windows）

    小编的业余游戏之一<炉石传说>,这里分享的是现在很火的游戏拔线(跳过约20秒的战斗动画),用夜吹的话说,注意,不是"日你大坝",是"整活",哈哈.小 ...

  2. (转载)跟Classic ARM 处理器说拜拜——Atmel SAMA5D3 Xplained开发板评测

    2014 年 4 月 10 日 时间: 下午 3:15 作者: 幸得安然 电子产业的蓬勃发展带来了史无前例的生活.生产大跃进,但是,人们在享受发展喜悦的同时又不得不面临现实现状的囧境--在以移动电子设 ...

  3. MySQL【灵魂拷问】

    MySQL 一直是本人薄弱的部分,后面会多总结 MySQL 的文章,毕竟 MySQL 涉及到数据存储.锁.磁盘寻道.分页等操作系统概念,而且互联网对 MySQL 的注重程度是不言而喻的,后面要加紧对 ...

  4. map的key排序

    java map的key排序吗 java为数据结构中的映射定义了一个接口java.util.Map,他实现了四个类,分别是:HashMap,HashTable,LinkedHashMapTreeMap ...

  5. 【C语言程序设计】小游戏之俄罗斯方块（一）！适合初学者上手、练手！

    俄罗斯方块的核心玩法非常简单,所以制作起来并不是很复杂,我准备先用2篇文字的篇幅详细讲解一下俄罗斯方块的制作方法. 今天咱们算是第一篇,主要讲解俄罗斯方块中如何定义方块,以及如何实现方块的移动.旋转. ...

  6. 多路查找树（2-3 树、2-3-4 树、B 树、B+ 树）

    本文参考自<大话数据结构> 计算机中数据的存储 一般而言,我们都是在内存中处理数据,但假如我们要操作的数据集非常大,内存无法处理了,在这种情况下对数据的处理需要不断地从硬盘等存储设备中调入 ...

  7. git的一些操作命令

    一,如何修改一个commit的注释? root@kubuntu:/data/git/clog# git commit --amend 说明:架构森林是一个专注架构的博客,地址:https://www. ...

  8. 远程Jenkins新增Mac电脑节点

    一,前言 上一篇博客Jenkins集成appium自动化测试(Windows篇)介绍了怎么使用远程Jenkins新建节点连接本地Windows电脑进行Appium自动化测试集成. 但是在做ios Ap ...

  9. c++ qsort的使用

    c++ qsort的使用 qsort函数定义在头文件algorithm中,使用时需要include该头文件 void qsort (void* base, size_t num, size_t siz ...

  10. 联赛模拟测试22 D. 简单计算

    题目描述 分析 \(\sum_{i=0}^p[(p|qi)?0:1]=\sum_{i=0}^p[(p/gcd(p,q)|qi/gcd(p,q))?0:1]=\sum_{i=0}^p[(p/gcd(p, ...