Vue中封装axios
参考:
https://www.jianshu.com/p/7a9fbcbb1114
https://www.cnblogs.com/dreamcc/p/10752604.html
一、安装axios
npm i axios -S
二、创建src/utils/axios.js、src/api/api.js
axios.js用于封装axios,api.js用于管理接口
三、axios.js
// axios.js import axios from "axios";
// 部分数据需要存进store或取出
import store from "@/store"
// 请求错误时提示,根据需求引入不同ui
import { Toast, MessageBox } from "mint-ui";
// 根据返回值进行页面跳转
import router from "vue-router"
// 封装的获取本地token的方法
import { getToken } from "@/utils/auth" const service = axios.create({
// headers: {'X-Requested-With': 'XMLHttpRequest'}, // 可以配置headers
baseURL: "", // api的base_url
timeout: 10000 // request timeout,默认0
});
// 请求头的设置
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 添加一个请求拦截器
service.interceptors.request.use(
(config)=> {
// Do something before request is sent
// 获取tonken,一般是从本地获取
// if (store.getters.token) {
// config.headers["token"] = getToken();
// }
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
); // 添加一个响应拦截器
service.interceptors.response.use(
(response)=> {
// Do something with response data
// 根据返回值做出判断
if (response.code !== 0) {
// 不成功时...
if (response.code == -1) {
// token失效时,清空缓存,跳转至登录页
// store.commit('SET_TOKEN', '')
// router.push({
// path: ""
// })
}else if(){ }else{
// 提示错误信息
Toast({ message: response.msg, position: "top", duration: 2 * 1000 })
}
}else{
// 请求成功时
return response;
}
},
(error)=> {
// Do something with response error
// 提示错误信息
Toast({ message: error.message, position: "top", duration: 5 * 1000 })
return Promise.reject(error);
}
); export default service
四、api.js
// api.js
import request from "@/utils/axios"; export function oneApi(val) {
return request({
url: "", // 接口
method: "post", // 请求方式
data: val, // 数据
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
} export function twoApi(val) {
return request({
url: "", // 接口
method: "post", // 请求方式
data: val, // 数据
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
}
五、使用
import { oneApi} from "@/api/api";
Vue中封装axios的更多相关文章
- vue中封装axios方法
axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...
- Vue中封装axios组件实例
首先要创建一个网络模块network文件夹 里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- vue中对axios进行封装
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...
- vue中使用axios最详细教程
前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...
- vue中使用axios进行http通信
1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- vue中使用axios
1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...
随机推荐
- 容器监控工具WeaveScope
最近一段时间整了一些docker容器,弄了一些基于docker的微服务通信,弄好一套服务系统之后,对于服务的性能,基础数据的监控就显的很重要, 不然就是两眼一抹黑了,要不就是维护成本很高,这些都不符合 ...
- SpringBoot安全管理--(三)整合shiro
简介: Apache Shiro 是一一个开源的轻量级的Java安全框架,它提供身份验证.授权.密码管理以及会话管理等功能. 相对于Spring Security, Shiro框架更加直观.易用,同时 ...
- Hadoop-HDFS(HDFS-HA)
HDFS(Hadoop Distributed File System) 分布式文件系统,HDFS是一个高度容错性的系统,适合部署在廉价的机器上.HDFS能提供高吞吐量的数据访问,非常适合大规模数据集 ...
- vue中报错Do not use built-in or reserved HTML elements as component id details
原因是定义了一个叫做details的comonent 跟现有的html网页中的标签重合 export default { name: 'details', data () { return { equ ...
- jQuery---jQuery插件
jQuery插件 使用插件的步骤 1. 引入jQuery文件 2. 引入插件(如果有用到css的话,需要引入css) 3. 使用插件 <!--1. 引入jquery的js文件--> < ...
- Auto-Encoder(自编码器)原理
1.无监督学习 无监督学习和监督学习是机器学习的两个方向,监督学习主要适用于已经标注好的数据集(如mnist分类问题),无监督学习则是希望计算机完成复杂的标注任务,简单的解释就是——教机器自己学习,它 ...
- C#常见基础算法
namespace 面试常见算法 { class Program { static void Main(string[] args) { ); Console.WriteLine(n1); Test2 ...
- MySQL 8 日期计算
timestampdiff()函数: 按照需要的单位计算两值之间的时间差,比如: select timestampdiff(year, date_1, date_2) from table_name; ...
- Python 测试代码 初学者笔记
单元测试 每完成一个单元测试,Python都会打印一个字符: 测试通过打印一个句点:测试引发错误打印E:测试导致断言失败打印F 模块unittest import unittest from name ...
- Redis 数据类型及操作
前言 作为Key-value型数据库,Redis也提供了键(Key)和键值(Value)的映射关系.但是,除了常规的数值或字符串,Redis的键值还可以是以下形式之一: Lists (可重复列表) S ...