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

先安装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. 多测师讲解自动化 _rf自动化需要总结的问题（2）_高级讲师肖sir

    1.口述整个自动化环境搭建的过程.以及环境搭建需要哪些工具包以及对应的工具包的作用?2.RF框架的原理?常见的功能?3.公司自动化测试的流程?1.自动化需求的评审2.自动化场景的选择3.自动化工具的选 ...

  2. 从源码的角度解析Mybatis的会话机制

    坐在我旁边的钟同学听说我精通Mybatis源码(我就想不通,是谁透漏了风声),就顺带问了我一个问题:在同一个方法中,Mybatis多次请求数据库,是否要创建多个SqlSession会话? 可能最近撸多 ...

  3. html学习（3）

    为你的网页中添加一些空格 语法:   1 body> 2 <h1>感悟梦想</h1> 3 来源:作文网  作者:为梦想而飞 4 </body> 认识<h ...

  4. xuexi0.1

    1.C语言通过编译器对内存进行了一定的封装.a +=4等效于a=a+4.C语言中数据类型的本质含义:表示一个内存格子的长度和解析方法.(int *)0:表示0是一个指针,这个指针指向一个int类型的数 ...

  5. gin+gorm 用户服务

    package main import ( "fmt" "github.com/gin-gonic/gin" "github.com/jinzhu/g ...

  6. swoole创建进程

    <?php /** * Created by PhpStorm. * User: mac * Date: 2020/4/23 * Time: 21:57 */ use Swoole\Proces ...

  7. List<String>转换为实体类的属性【转】

    package model; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.util.Arr ...

  8. Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  9. python fastApi实战项目 - 爱投票管理系统（一）

    一.闲来无事,在工作之余自己研究了一下python的异步框架 - fastapi,并写包括 1.部门管理 2.角色管理 3.用户管理 4.菜单管理 5.登录日志 6.操作日志 六个基础功能模块,演示链 ...

  10. Linux服务器部署redis常见问题处理

    redis开启和禁用登陆密码校验 1. 开启登陆密码校验 在redis-cli命令行工具中执行如下命令: config set requirepass yourpassword2. 禁用登陆密码校验 ...