//src 底下建立 api 文件夹
// api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可
 
/**
 * ajax请求配置
 */
import axios from 'axios'
import { Message } from 'element-ui'
// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
// 整理数据 --- 可要可不要,这个问题不大,无所谓
// axios.defaults.transformRequest = function(data) {
//     data = JSON.stringify(data)
//     return data
// }
// 定义请求头 使用JSON格式
axios.defaults.baseURL = 'apis/api/' 
axios.defaults.headers.post //post 要单独设置,下面的 api.js 会说明
axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'
// 路由请求拦截
axios.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded; multipart/form-data'
        config.headers['Authorization'] = 'Bearer '+ window.localStorage.getItem('access_token')
        config.headers['Accept'] = 'application/json'
        return config
    },
    error => {
        return Promise.reject(error.response)
    }
)
// 路由响应拦截
axios.interceptors.response.use(
    response => {
        if(response.status === 401){ // token过期
            Message.error(response.data.errDesc)
            window.localStorage.removeItem('access_token');
            router.replace({
                path: '/', //返回登录页重新登录
                query: {
                    redirect: router.currentRoute.fullPath
                }
            })
        }else{
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response) // 返回接口返回的错误信息
    }
)
export default axios
 
 
// 和 request.js 同层 建立 api.js(由于是一个人开发,所以只建立一个 api.js,可以根据自己需要把 request.js 导入到自己需要的 api.js 的文件中去)
//统一封装api请求
import request from '../api/request'
import axios from 'axios' // 可以自行手写的 axios 请求
import qs from 'qs' // 可以用于转换 post 需要的 fromData 格式
import url from 'postcss-url';
 
// 导出接口
export function 接口名字( 传给后端的接口参数 ) {
    return request({
        url: '  ',//接口路径
        method: 'post', //请求方式
        
        //转换数据格式 --- 这段代码很关键,用于转换post 的fromData 格式的
        transformRequest: [
            function(data) {
                let ret = '';
                for (let it in data) {
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
                }
                return ret;
            }
        ],

  // 头部必须设置是 fromData 格式,不然会报错

        headers:{

    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
  // 接口数据 - 上面括号传过来的数据
        data : {
            
        }
    })
}
 
 
// vue 文件中的使用
script 中
import { 上面定义的接口名字 } from ' 自己定义的 api.js 的文件路径 '
 
export default{
  methods: {
    
    

自己定义一个方法名字用于调用(传给后台的参数: 例如 : 分页,搜索框 ){
    
            api.js 的 方法名字 ( 这里是传入 api.js 的方法中的参数 ).then(res=>{
                  接收数据
              }).catch(()=>{
                  this.$message.error(" 数据发生错误的时候的提示 ")
              })
          },
 
  }
}
 
 
 
 
 

vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  3. vue 封装axios以及使用中间代理 proxy

    为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件   用来存放接口地 ...

  4. XML序列化 判断是否是手机 字符操作普通帮助类 验证数据帮助类 IO帮助类 c# Lambda操作类封装 C# -- 使用反射(Reflect)获取dll文件中的类型并调用方法 C# -- 文件的压缩与解压(GZipStream)

    XML序列化   #region 序列化 /// <summary> /// XML序列化 /// </summary> /// <param name="ob ...

  5. 封装的方法--读取任何路径下的properties文件中的值

    概述:我们在做项目时,经常需要从某个properties文件中读取properties文件中的值.现在我封装了一下方法,直接读取配置文件中的值. 代码如下所示: /** * Created by qi ...

  6. vue封装axios

    一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...

  7. vue封装axios方法推荐)

    目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...

  8. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  9. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

随机推荐

  1. 第二十九篇 -- UDP和TCP

    最近在写WIFI模块,所以就想明确一些TCP和UDP的区别,发现以前的理解还是有点误区.现在重新学习. 相同点 UDP协议和TCP协议都是传输层协议 TCP(Transmission Control ...

  2. 深度掌握 Java Stream 流操作,让你的代码高出一个逼格!

    概念 Stream将要处理的元素集合看作一种流,在流的过程中,借助Stream API对流中的元素进行操作,比如:筛选.排序.聚合等. Stream 的操作符大体上分为两种:中间操作符和终止操作符 中 ...

  3. 解决跨网段intouch嵌入视频问题

    在自控项目中,一般会将视频网络和自控网络分开,分属于两个不同的逻辑网段,以避免局域网ip不够用的问题.这就造成了一个问题,如何实现在自控网络上位机访问摄像头并嵌入使用?这里其实很简单,因为这两个网络本 ...

  4. Aapache Tomcat AJP 文件包含漏洞(CVE-2020-1938)

    受影响版本 Apache Tomcat 6 Apache Tomcat 7 < 7.0.100 Apache Tomcat 8 < 8.5.51 Apache Tomcat 9 < ...

  5. 'Rem EverythingAutoSetup.VBS 安装Everything的VBS脚本 2019年11月25日写

    'Rem EverythingAutoSetup.VBS 安装Everything的VBS脚本 2019年11月25日写 'Rem Everything是voidtools开发的一款本地NTFS文件和 ...

  6. 记录21.07.23 —— Vue.js基础(二)

    Vue基础(二) 过滤器 过滤器作用 全局过滤器 输出结果 私有过滤器 输出结果 把其中一个做点修改 错误信息 自定义指令 全局自定义指令 私有自定义指令 钩子函数 注意:fond-weight是粗细 ...

  7. RSA算法之学习

    一.RSA算法 RSA是非对称加密算法中的代表,它的重要性不言而喻,为了弄清楚RSA算法,我们一起来完成一项任务: 背景:现在是疫情时代,假如小明和女朋友被迫在两个城市,小明为了表达感情,想发给对方一 ...

  8. null是对象吗?

    null是基本数据类型但是typeof null为object,这是因为在js存储中对象是以000开头的,而null是一个空,相当于全0,所以typeof null也是object 在js中,变量由类 ...

  9. Linux命令(九)之安装mysql

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

  10. rancher恢复kubecfg配置文件

    docker run安装的单容器Rancher Server # 进入容器 docker exec -ti <容器ID> bash # 集群ID,可通过浏览器地址栏查询 cluster_i ...