Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >axios的封装与请求

axios的封装与请求

作者头像
Ewall
发布于 2020-04-09 03:51:32
发布于 2020-04-09 03:51:32
1.1K00
代码可运行
举报
文章被收录于专栏:vue学习vue学习
运行总次数:0
代码可运行

引入下axios,然后对axios做下基本的封装。然后就是mock数据的方式说一下,以及在项目中使用的mock方式。

1、安装

  • axios是什么就不说了吧,你应该已经很熟了,就直接安装吧。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm install axios --save

2、axios封装

  • 然后我们简单的在src/utils/request.js中简单的进行了一下axios封装
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import axios from 'axios'
import { Toast, Dialog } from 'vant'

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // withCredentials: true,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 这里做些发送请求前的事情
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data

    // 与后端约定的错误码
    if (res.code !== 200) {
      Toast.fail(res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    Toast.fail(error.message)
    return Promise.reject(error)
  }
)

export default service
  • 对于环境的不同判断,比如开发环境、灰度环境、线上环境等等在@vue/cli3.x中通过新建一个.env.[xxx]的文件来维护-->环境变量和模式
  • 比如说我们上文中的axios实例中的baseURL:process.env.VUE_APP_BASE_API,取的就是不同环境下的所定义的值。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// .env.development
# base api
VUE_APP_BASE_API = '/dev-api'
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// .env.production
# base api
VUE_APP_BASE_API = '/prod-api'

3、使用

  • 以我们首页中获取banner数据为例(关于数据mock请浏览下一节内容),首先我们新建了一个src/api文件夹用于维护接口,在该文件夹下定义了一个getBanner请求方法:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import request from '@/utils/request'

export function getBanner() {
  return request({
    url: '/home/banner',
    method: 'get'
  })
}
  • 然后我们在首页home.vue中引入并使用它:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { getBanner } from '@/api/home'

getBanner() {
  getBanner().then(res => {
    this.banner = res.entry
  })
}
  • 这就是axios从安装、到封装、到api接口维护、到请求的一个大体的流程了。
  • 关于数据的mock看下一节。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用 Vue 框架封装 Axios 解决网络请求常见问题的实践方法
Axios是一个基于Promise的HTTP客户端,专为浏览器和Node.js设计,具有以下特性:
小焱
2025/05/21
2740
使用 Vue 框架封装 Axios 解决网络请求常见问题的实践方法
Vue3.x中axios的全局配置与封装
但是在实际项目开发中,几乎每个组件都会用到axios发起数据请求,此时会遇到如下两个问题:
岳泽以
2022/11/14
7.6K1
Vue3.x中axios的全局配置与封装
【谷粒学院】016-前后端:实现登录功能
由于自己的年少情况,遇到了很多阻碍,甚至中途泄气,虽然通过自己研究了解到很多知识吧,但项目的进度真实严重滞后了,还好最终找到了通路,总结出的教训:学习最好按照老师教的一步一步来,不要好高骛远、自以为是,要尽量使用老师使用的框架版本,加油!
訾博ZiBo
2025/01/06
1520
【谷粒学院】016-前后端:实现登录功能
axios的前端封装
在vue项目中,大家一般都会频繁的使用axios发起请求。 那我们索性把axios封装成一个我们自己的工具类, 使用起来就会很方便 新建js文件 名为request.js 第一步 导入依赖 import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '../store' import { getToken } from '@/utils/auth' 第二步 创建axios实例 /
Tom2Code
2022/11/21
5640
学习 Vue 3 全家桶 - Vue 项目规范和基础封装
像 axios、 NProgress、xlsx、clipboard 等相对独立的工具来说,引入的难度非常低。
Cellinlab
2023/05/17
3120
浅学前端:Vue篇(五)
这里选择了 vue-element-admin 这个项目骨架,它采用的技术与我们之前学过的较为契合
传说之下的花儿
2023/11/15
2500
浅学前端:Vue篇(五)
vue封装axios请求工具类
以勇气面对人生的巨大悲恸,用耐心对待生活的小小哀伤。——雨果 首先安装 # axios cnpm i --save axios # 格式化参数插件 cnpm i -- save qs # 对象合并插件 cnpm i -- save lodash # cookie操作 cnpm i -- save vue-cookie 然后我们自己封装一个请求组件 首先创建文件 然后放入我们的代码。。。 import axios from 'axios' import qs from 'qs' import
阿超
2022/08/16
1.1K0
vue封装axios请求工具类
易扩展,易复用,封装axios
axios是近几年比较火的一个前端库,完美代替了jquery中的ajax,它不仅可以运行在浏览器也可以运行在nodejs环境下,而且支持Promise API 可以拦截请求,和返回.而且天生防XSRF
拿我格子衫来
2022/01/24
1K0
vue2封装axios接口代码
@toc在/utils新建requestimport axios from 'axios'import bus from '@/utils/bus'import {Message} from 'element-ui'const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // baseURL: '/api', // url = base url + requ
肥晨
2023/04/04
4670
axios详解以及完整封装方法
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
HelloWorldZ
2024/03/20
11.1K0
Axios安装封装api接口
在src中新建一个axios文件夹,建一个http.js文件 Dialog为vant组件
明知山
2020/09/03
8790
vue中Axios的封装和API接口的管理
回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
Nealyang
2019/09/29
3.8K0
vue中Axios的封装和API接口的管理
二次封装axios
二次封装axios 根据我自己喜好进行轻量封装。 import axios from 'axios'; import { Notify } from 'vant'; axios.defaults.timeout = 5000 axios.defaults.baseURL = process.env.VUE_APP_BASE_API axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charse
4O4
2022/04/25
3240
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装
使用 vue 开发时,频繁使用到了 axios 这个网络请求库,这里对其做一个发起请求时携带参数方式的小结。
HelloWorldZ
2024/03/20
2340
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装
详细讲解axios封装与api接口封装管理
axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
江一铭
2022/06/16
3.7K0
axios封装token示例
在使用 Axios 发送请求时,可以通过添加 Authorization 头部信息传递 Token。为了方便地在多个请求中使用 Token,可以封装一个 Axios 实例,并在其中添加 Token。
小小孩子们
2024/02/03
1.3K0
Axios的封装思想及实践(TS版本)
原生的拦截器位于axiosInstance实例中,使用方法是(来源官网:拦截器 | Axios 中文文档 (axios-http.cn))
玖柒的小窝
2021/10/26
2.6K0
Axios的封装思想及实践(TS版本)
axios(封装使用、拦截特定请求、判断所有请求加载完毕)
业务上经常出现这个问题,需要拦截某些特定请求,在该特定请求,页面采取或不采取什么变化
Krry
2019/04/09
5.7K0
axios封装
訾博ZiBo
2025/01/06
1170
2.封装axios、本地存储,安装vuex、element
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
RtyXmd
2018/08/30
1.4K0
2.封装axios、本地存储,安装vuex、element
相关推荐
使用 Vue 框架封装 Axios 解决网络请求常见问题的实践方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验