第一步,首先安装axios,这里推荐局部安装

npm i -D axios

第二步,在src目录下创建request文件夹,然后在里面创建两个文件http.js、api.js

http.js

import axios from ‘axios’
// 环境的切换
if (process.env.NODE_ENV === ‘development’) {
axios.defaults.baseURL = ‘’ // 开发环境
} else if (process.env.NODE_ENV === ‘debug’) {
axios.defaults.baseURL = ‘’ // 调试环境
} else if (process.env.NODE_ENV === ‘production’) {
axios.defaults.baseURL = ‘’ // 生产环境
}
axios.defaults.timeout = 10000
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data’

// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
// const token = this.$store.state.Authorization
// token && (config.headers.Authorization = token)
// return config
if (localStorage.getItem(‘Authorization’)) {
config.headers.Authorization = localStorage.getItem(‘Authorization’);
}
return config;
},
error => {
return Promise.error(error)
})

// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
// 服务器状态码不是200的情况

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119352987

Vue之封装二次axios的更多相关文章

  1. vue项目搭建 (二) axios 封装篇

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

  2. Vue小项目二手书商城:(二)axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  3. AntDesign vue学习笔记(二)axios使用

    之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...

  4. vue 基础(二)

    Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...

  5. Vue小项目二手书商城:(三)前端渲染数据

    实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...

  6. Vue小项目二手书商城:(一)准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  7. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  8. [前端] VUE基础 (9) (element-ui、axios、Vuex)

    一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...

  9. Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

随机推荐

  1. 【云原生小课堂】高性能、高可用、可扩展的MySQL集群如何组建?

    本期[云原生小课堂]将带你入门PXC--公认的MySQL集群优选方案.

  2. vue动态绑定属性--基本用法及动态绑定class

    动态绑定属性v-bind:,语法糖形式:省略v-bind,仅写一个冒号. 一.动态绑定基本属性 1 <body> 2 <!-- v-bind 动态绑定属性-基本用法 --> 3 ...

  3. 用 getElementsByTagName() 来获取,父元素指定的子元素

    1. html 结构 <ul> <li>知否知否,应是等你好久11</li> <li>知否知否,应是等你好久11</li> <li&g ...

  4. 技术分享 | Selenium 测试用例编写

    编写Selenium测试用例就是模拟用户在浏览器上的一系列操作,通过脚本来完成自动化测试. 编写测试用例的优势: 开源,免费. 支持多种浏览器 IE,Firefox,Chrome,Safari. 支持 ...

  5. .Net IDE智能提示汉化(.Net6、AspNetCore)

    .Net IDE智能提示汉化(.Net6.AspNetCore) 先上现成的.net6汉化文件,可以手动下载后参照 如何为 .NET 安装本地化的 IntelliSense 文件 进行安装.或者使用后 ...

  6. keil工程当中实现printf重定向串口打印

    之前是完全不知道printf可以重定向设置 最近才发现还有这等好事,可以让printf直接实现串口打印 在网上找了很多资料,终于实现了我想要的效果 原理:printf是通过调用底部的fputc来实现打 ...

  7. 题解0011:图书管理(哈希、vector)

    信奥一本通--哈希 里的例题2 题目链接:http://ybt.ssoier.cn:8088/problem_show.php?pid=1456 题目描述:两个命令,一个是进一本名字为s的图书,一个是 ...

  8. SpringBoot整合MybatisPlus基本的增删改查,保姆级教程

    概述 MybatisPlus是国产的第三方插件, 它封装了许多常用的CURDapi,免去了我们写mapper.xml的重复劳动,这里介绍了基本的整合SpringBoot和基础用法. 引入依赖 在项目中 ...

  9. JS 加载

    DOM 加载完毕后执行,不需要等待image.js.css.iframe等加载 1.$(function() {}) 2.$(document).ready(function() {})  不要写成 ...

  10. srpingboot拦截器

    1.创建一个普通的web工程. 2.先创建需要的基础文件,比如一个用户类. package com.example.mode; public class User { private Integer ...