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

先安装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. axio跨域请求，vue中的config的配置项。

    这是我用 vue cli 脚手架搭建的跨域.以上是可以请求到的.

  2. hasura的golang反向代理

    概述 反向代理代码 对请求的处理 对返回值的处理 遇到的问题 概述 一直在寻找一个好用的 graphql 服务, 之前使用比较多的是 prisma, 但是 prisma1 很久不再维护了, 而 pri ...

  3. DM9000网卡驱动分析（转）

    s3c6410自带的DM9000网卡驱动也是基于platform设备模型. 其定义的设备资源在arch/arm/mach-s3c64xx/mach-smdk6410中.有网卡的resource res ...

  4. mapbox处理中文标注不能换行问题

    mapbox的换行侧率是根据空格进行的,因为中文中没有设置空格,因此换行不起作用. 解决方法:在node_modules\ol-mapbox-style\util.js  60行添加下列代码: let ...

  5. mysql5.5和5.6的一些区别

    timestamp 5.5中 直接写timestamp不加长度   5.6 中 写的timestamp(3) datatime 5.5中 直接写datetime 不加长度  5.6中 可以添加长度(3 ...

  6. Git hub加载慢？下载慢？浏览慢？几个小技巧让你一键起飞！

    记得,那是一个风和日丽,艳阳高照的夜晚,只因为当初的一次回眸,于是便决然走向了程序员的道路,从此,CV大法心中记,代码伴我身. 这一天,正当我打开电脑准备开开心心的使用CV大法完成任务的时候,却恼人的 ...

  7. cmake引入三方库

    目录结构 . |-- cmake | |-- CompilerSettings.cmake | |-- Options.cmake | `-- ProjectJsonCpp.cmake |-- CMa ...

  8. pytest文档40-pytest.ini配置用例查找规则(面试题)

    前言 面试题:pytest如何执行不是test开头的用例?如执行 xxx_*.py这种文件的用例. pytest.ini 配置文件可以修改用例的匹配规则. pytest命令行参数 cmd打开输入pyt ...

  9. elk-安装 通过docker

      一. github地址   https://github.com/deviantony/docker-elk   cd /usr/local/src   git clone https://git ...

  10. Gitlab 11.9.1 高可用教程

    Gitlab 11.9.1 高可用教程 一. PostgreSQL数据迁移 由于默认Gitlab的安装会内置Postgres数据库,并且没有对外,所以我们需要通过设置对应的Gitlab的配置将其中的数 ...