可以在代码逻辑中写axios请求,处理请求结果,但是随着项目越来越大,代码会很繁琐,不容易维护,所以,可以把一些在所有请求中都要处理的逻辑抽取出来,封装成api方法。比如每次请求中都要判断是否有权限,每次请求都要携带token。

  1. 建一个request.js文件,对请求的服务的拦截

    import axios from 'axios'
    
    // create an axios instance,根据需要写入配置信息
    const service = axios.create({
    // baseURL: process.env.BASE_API, // api的base_url
    // timeout: 5000,
    //headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },//method: 'get', //一般需要用post
    // request timeout
    }) // request interceptor 请求之前的拦截器
    service.interceptors.request.use(config => {
    // Do something before request is sent
    return config
    }, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
    }) // respone interceptor 请求之后异常状态拦截
    service.interceptors.response.use(
    response => {
    const res = response.data;
    if (res.statusCode === || res.statusCode === || res.statusCode === || res.statusCode === || res.statusCode === ) {
    return Promise.reject('error');
    } else {
    return response.data;
    }
    },
    error => {
    console.log('err' + error)// for debug
    return Promise.reject(error)
    }
    ) export default service
  2. 添加auth.js文件,本地缓存实现对用户信息缓存的读写和移除,代码:
    //与用户验证相关的方法
    
    export function getToken() {
    //从localstorage获取token
    return localStorage.getItem('token');
    } export function setToken(token) {
    //本地缓存存储token
    localStorage.setItem('token', token);
    } export function removeToken() {
    //本地缓存移除token
    localStorage.removeItem('token');
    } export function getUserId() {
    //从本地缓存中获取userID
    return localStorage.getItem("userid");
    } export function setUserId(userid) {
    //本地缓存存储userId
    localStorage.setItem('userid', userid);
    } export function removeUserId() {
    //本地缓存移除userId
    localStorage.removeItem('userid');
    } export function getProjectId() {
    //从本地缓存中获取projectid
    return localStorage.getItem("projectid");
    } export function setProjectId(projectid) {
    //本地缓存存储projectid
    localStorage.setItem('projectid', projectid);
    } export function removeProjectId() {
    //本地缓存移除projectid
    localStorage.removeItem('projectid');
    }
  3. 在store.js中,添加如下对auth.js的使用,和状态管理:
    import Vue from 'vue'
    import Vuex from 'vuex'
    import { getToken, setToken, removeToken, getUserId, setUserId, getProjectId, setProjectId, removeUserId, removeProjectId } from '../Utils/auth.js' Vue.use(Vuex); /*访问状态对象--存放变量*/
    const state = {
    token: getToken(),
    userId: getUserId(),
    projectId: getProjectId()
    }
    /*访问触发对象--存放事件*/
    const mutations = {
    SET_TOKEN: (state, token) => {
    setToken(token);
    //state.token = token;
    //localStorage.setItem('token', token);
    },
    SET_USER_ID: (state, m) => {
    setUserId(m);
    },
    SET_PRO_ID: (state, m) => {
    state.projectId = m;
    setProjectId(m);
    }, //用户注销后删除所有本地数据
    LOGOUT: (state) => {
    removeToken();
    removeUserId();
    removeProjectId();
    }
    }
    export default new Vuex.Store({
    state,
    mutations
    })
  4. 添加webapi.js:使用request.j实现对请求的拦截,封装测试前端api,传递参数,发送请求:
    import request from './request'  //引入request.js实现对请求前后的拦截功能
    export function getTest(apiRoute) {
    return request({
    url: apiRoute,
    method: 'get',
    params: { "ai": "ai" }
    })
    }
  5. webApi在组件中的使用
      //按需引入封装好的webapi的方法   
      import { getTest } from "../../Utils/webapi.js";
    export default{
    //测试前端api的使用,在创建的时候发送请求,获取项目信息
    created: function() {
    var _this = this;
    //test
    getTest("/project/test").then(response => {
    _this.testapi = response.data;
    });
    },
    }

该例子是针对项目的简单封装和使用例子,具体的axios的配置和相关知识可以看下一遍文章介绍

    

简单封装axios api的更多相关文章

  1. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...

  2. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  3. axios简单封装

    写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...

  4. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  5. 用XHR简单封装一个axios

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [web 前端] 封装简单的axios库

    转载自https://blog.csdn.net/qq_35844177/article/details/78809499 1.新建http.js文件,封装axios get post 方法 impo ...

  7. Vue.js(18)之 axios简单封装

    基于vue-cli2.x封装axios src目录 axios.js import axios from 'axios' import { Indicator, Toast } from 'mint- ...

  8. Vue笔记:封装 axios 为插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  9. vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title

    1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...

随机推荐

  1. “全栈2019”Java异常第十五章:异常链详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  2. JAVA常见面试题之Forward和Redirect的区别 (转发和重定向)

    阅读目录 一:间接请求转发(Redirect) 二:直接请求转发(Forward) 用户向服务器发送了一次HTTP请求,该请求可能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相 ...

  3. Python数据采集处理分析挖掘可视化应用实例

    距离上一次发Python的技术贴已经过去两年了,这两年大法初成,并在知乎谢了相关技术专栏.现在搬运如下,均为原创,转载需注明出处哦! https://zhuanlan.zhihu.com/p/2957 ...

  4. $.ajax()——超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

  5. [VB6.0-->VB.NET]关于VB6.0升级到VB.NET的微软官方文档

    升级流程大体是这样的: 1.用VS2008打开Vb6.0的工程(此时针对语言层面自动升级). 注: VS更新多版了(当前最新VS2017),用最新版再打开2008升级后的工程的时候还是会有自动升级,相 ...

  6. rpm 安装卸载

    安装命令 rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm 包并在安装过程中显示正在安装的文件信息: rp ...

  7. FlowPortal-BPM——离线审批(邮箱审批)配置

    一.将系统文件复制到安装目录下 二.以管理员身份运行bat安装程序 三.开启邮件离线审批服务 四.创建数据库表(JAVA数据库 或 .Net数据库) 五.配置config文件(发件箱.收件箱.错误问题 ...

  8. centos 7修改系统支持中文编码

    2019-03-14 查看系统现支持编码 }[root@web dc2-user]#locale LANG=en_US.UTF- LC_CTYPE="en_US.UTF-8" LC ...

  9. MVC3权限验证,诡异的OnAuthorization

    mvc3权限验证 protected override void OnAuthorization(AuthorizationContext filterContext) { if (//开始权限验证返 ...

  10. 【Vim】Vim学习

    1. 三种模式 (1)命令模式:刚启动vim便进入命令模式,此时敲击键盘会被当做命令来处理 以下是常用的几个命令: i 切换到插入模式,以输入字符.x 删除当前光标所在处的字符.: 切换到底线命令模式 ...