参考:

  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";

        oneApi(params).then(response => {
 
        });

Vue中封装axios的更多相关文章

  1. vue中封装axios方法

    axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...

  2. Vue中封装axios组件实例

    首先要创建一个网络模块network文件夹  里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...

  3. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  4. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  5. vue中对axios进行封装

    在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...

  6. vue中使用axios最详细教程

    前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...

  7. vue中使用axios进行http通信

    1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...

  8. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  9. vue中使用axios

    1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...

随机推荐

  1. Mybatis注解开发多表一对一,一对多

    Mybatis注解开发多表一对一,一对多 一对一 示例:帐户和用户的对应关系为,多个帐户对应一个用户,在实际开发中,查询一个帐户并同时查询该账户所属的用户信息,即立即加载且在mybatis中表现为一对 ...

  2. 13.python内置模块之re模块

    什么是正则? 正则表达式也称为正则,是一个特殊的字符序列,能帮助检查一个字符串是否与某种模式匹配.可以用来进行验证:邮箱.手机号.qq号.密码.url = 网站地址.ip等.正则不是python语言独 ...

  3. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  4. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  5. springCloud进阶(微服务架构&Eureka)

    springCloud进阶(微服务架构&Eureka) 1. 微服务集群 1.1 为什么要集群 为了提供并发量,有时同一个服务提供者可以部署多个(商品服务).这个客户端在调用时要根据一定的负责 ...

  6. MySQL基础(6) | check约束

    MySQL基础(6) | check约束 前言 在一些情况下,我们需要字段在指定范围的输入, 例如:性别只能输入 '男'或者'女',余额只能大于0等条件, 我们除了在程序上控制以外,我们还能使用 CH ...

  7. modbus 协议说明及常用格式

    --- 说明: modbus协议一般适用于一个主设备访问多个从设备的硬件开发环境,类似于zigbee网络中的一个路由器多个协调器的一对多模型. modbus常用的寄存器类型为 3X 保持寄存器和 4X ...

  8. 网站SEO中服务器优化的三个问题

    网站做好之后,站长第一件事就是想到去做SEO,但是有一些网站在做优化的时候,出现一些奇怪的情况,比如说优化已经不错的网站,排名突然就掉下来了:还有一些网站各项优化工作都是非常认真,但是排名却一直不上来 ...

  9. JPA 常用注解

    @Entity(name=”EntityName”):必须,name为可选,对应数据库中一的个表 @Table(name=””,catalog=””,schema=””):可选 通常和@Entity配 ...

  10. 【NLP】暑假课作业3 - 词性标注(简单词频概率统计)

    作业任务: 使用98年人民日报语料库进行词性标注训练及测试. 作业输入: 98年人民日报语料库(1998-01-105-带音.txt),用80%的数据作为训练集,20%的数据作为验证集. 运行环境: ...