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 ...
随机推荐
- XAML 字符转义
在 写xaml的使用遇到了一些特殊字符,这里记录一下特殊字符转义. 这些特殊字符遵循用于编码的万维网联合会(W3C) XML 标准. 下表显示这组特殊字符的编码语法: 字符 语法 描述 < & ...
- SQLServer之查询当前服务器下所有目录视图表
SQL脚本 /*************1:删除临时表*************/ if exists(select * from tempdb..sysobjects where id=object ...
- 学习 Vim 命令总结
学习 Vim 命令总结 可以使用 vscode-vim 扩展,但是要注意一些ctrl+字母的快捷键会无效,必须去掉冲突的快捷键 esc 回到普通模式 i 普通模式进入插入模式 : 进入命令模式 :wa ...
- Dijkstra算法 1
// Dijkstra算法,适用于没有负边的情况 // 注意:是没有负边,不是没有负环 // 在这一条件下,可以将算法进行优化 // 从O(v*E)的复杂度,到O(V^2)或者是O(E*log(V)) ...
- Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第二步 添加Identity
添加Identity数据上下文 安装nuget包:Microsoft.AspNetCore.Identity.EntityFrameworkCore 创建ApplicationDbContext类 创 ...
- 树莓派点亮LED灯需要几行代码?3行。小孩子都能学会
目录 点亮LED灯 硬件连接 代码 闪烁的LED灯 呼吸灯 其他 点亮LED灯 硬件连接 找一个LED灯,连接如上图,注意长短引脚,经过这些年的狂轰乱炸,大家对于这个应该不漠视,毕竟Arduino都进 ...
- myeclipse 2018 intaslled jars JREs 选项区别,及注意事项
Standard 1.1.x VM与Standard VM的区别 在Eclipse或MyEclipse中要设置Installed JREs时,有三个选择: - Execution Environmen ...
- mysql常见问题解决方案
属性顺序错误 一般情况下字段类型要放在前面,限制参数放在后面,UNSIGNEDZEROFILL 之间没有先后顺序,主键 KEY 和 auto_increment 要放在UNSIGNED ZEROFIL ...
- python函数的使用
python函数的使用 制作人:全心全意 函数的定义 def 函数名(参数): 函数体 参数的使用 def 函数名(a): 函数体 函数名(5) 默认函数 def 函数名(a=5): 函数体 函数名( ...
- 使用 TypeScript & mocha & chai 写测试代码实战(17 个视频)
使用 TypeScript & mocha & chai 写测试代码实战(17 个视频) 使用 TypeScript & mocha & chai 写测试代码实战 #1 ...