参考:

  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. 容器监控工具WeaveScope

    最近一段时间整了一些docker容器,弄了一些基于docker的微服务通信,弄好一套服务系统之后,对于服务的性能,基础数据的监控就显的很重要, 不然就是两眼一抹黑了,要不就是维护成本很高,这些都不符合 ...

  2. SpringBoot安全管理--(三)整合shiro

    简介: Apache Shiro 是一一个开源的轻量级的Java安全框架,它提供身份验证.授权.密码管理以及会话管理等功能. 相对于Spring Security, Shiro框架更加直观.易用,同时 ...

  3. Hadoop-HDFS(HDFS-HA)

    HDFS(Hadoop Distributed File System) 分布式文件系统,HDFS是一个高度容错性的系统,适合部署在廉价的机器上.HDFS能提供高吞吐量的数据访问,非常适合大规模数据集 ...

  4. vue中报错Do not use built-in or reserved HTML elements as component id details

    原因是定义了一个叫做details的comonent 跟现有的html网页中的标签重合 export default { name: 'details', data () { return { equ ...

  5. jQuery---jQuery插件

    jQuery插件 使用插件的步骤 1. 引入jQuery文件 2. 引入插件(如果有用到css的话,需要引入css) 3. 使用插件 <!--1. 引入jquery的js文件--> < ...

  6. Auto-Encoder(自编码器)原理

    1.无监督学习 无监督学习和监督学习是机器学习的两个方向,监督学习主要适用于已经标注好的数据集(如mnist分类问题),无监督学习则是希望计算机完成复杂的标注任务,简单的解释就是——教机器自己学习,它 ...

  7. C#常见基础算法

    namespace 面试常见算法 { class Program { static void Main(string[] args) { ); Console.WriteLine(n1); Test2 ...

  8. MySQL 8 日期计算

    timestampdiff()函数: 按照需要的单位计算两值之间的时间差,比如: select timestampdiff(year, date_1, date_2) from table_name; ...

  9. Python 测试代码 初学者笔记

    单元测试 每完成一个单元测试,Python都会打印一个字符: 测试通过打印一个句点:测试引发错误打印E:测试导致断言失败打印F 模块unittest import unittest from name ...

  10. Redis 数据类型及操作

    前言 作为Key-value型数据库,Redis也提供了键(Key)和键值(Value)的映射关系.但是,除了常规的数值或字符串,Redis的键值还可以是以下形式之一: Lists (可重复列表) S ...