更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn

vue中axios的封装

在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs.com/package/axios。

浅谈在项目中axios的简单二次封装

安装

  1. npm install axios; //安装axios
  2. //cnpm install axios;//或者使用镜像下载.

引入组件

通常情况下,在项目src目录下创建request文件夹,然后创建http.js和api.js文件。

  • http.js用来二次封装axios;
  • api.js用来统一管理后端接口;

在http.js文件中

  • 引入axios;
  • 引入qs,用于序列化post类型的数据。
  • 引入ui提示框,根据自己u进行修改;推荐elementui文档

环境切换

在http.js的文件中的axios.defaults.baseURL可以设置axios的默认请求地址。配合不同的运行指令进行开发不同环境的数据。

另附配置vue不同环境配置不同打包命令

  1. // 环境的切换
  2. if (process.env.NODE_ENV == 'development') {
  3. axios.defaults.baseURL = 'https://www.baidu.com';}
  4. else if (process.env.NODE_ENV == 'debug') {
  5. axios.defaults.baseURL = 'https://www.ceshi.com';
  6. }
  7. else if (process.env.NODE_ENV == 'production') {
  8. axios.defaults.baseURL = 'https://www.production.com';
  9. }

请求默认值的设置

通过axios.defaults.timeout设置默认的请求超时时间。

  1. //设置默认的请求超时时间
  2. axios.defaults.timeout = 10000;

设置默认请求头和token

  1. //设置post的请求头
  2. axios.defaults.headers.post['Content-Type'] = 'application/json';
  3. //设置默认token 一般有权限不在这里设置
  4. //axios.defaults.headers.Authorization=token;

请求拦截

token拦截

一般情况下,发送请求必须带有token进行验证。做权限的话这里需要注意。

  1. axios.interceptors.request.use(
  2. config => {
  3. let token = localStorage.getItem("header");
  4. if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
  5. config.headers.token = `${token}`;
  6. }
  7. return config;
  8. },
  9. err => {
  10. this.$router.push("/login")
  11. return Promise.reject(err);
  12. });

响应拦截

这里需要根据后端协商,根据后端返回状态码进行处理

  1. axios.interceptors.response.use(function (response) {
  2. if (response.status >= 400) {
  3. localStorage.clear();// 删除已经失效或过期的token(不删除也可以,因为登录后覆盖)
  4. router.replace({
  5. path: '/login', // 到登录页重新获取token
  6. query: {
  7. //回到当前页面
  8. redirect: router.currentRoute.fullPath
  9. }
  10. })
  11. }
  12. return response
  13. }, function (error) {
  14. if (error.response) {
  15. if(error.response.status===403){
  16. Message({
  17. showClose: true,
  18. message: '登录过期',
  19. type: 'error'
  20. });
  21. localStorage.clear();
  22. Cookies.set("user","",-10);
  23. router.replace({
  24. path: '/login' // 到登录页重新获取token
  25. })
  26. }else if(error.response.status===405){
  27. Message({
  28. showClose: true,
  29. message: '权限不足,请联系管理员',
  30. type: 'warning'
  31. });
  32. router.replace({
  33. path: '/error',
  34. })
  35. }else if(error.response.status===500){
  36. Message({
  37. showClose: true,
  38. message: '服务器异常',
  39. type: 'error'
  40. });
  41. }
  42. }
  43. return Promise.reject(error)
  44. })

封装get和post方法

axios封装的方法有很多,比如get,post,delete,put等方法。这里简单介绍get和post的封装。

post

  1. /**
  2. * post方法,对应post请求
  3. * @param {String} url [请求的url地址]
  4. * @param {Object} params [请求时携带的参数]
  5. */
  6. export function post(url, params) {
  7. return new Promise((resolve, reject) => {
  8. axios.post(url, params)
  9. .then(res => {
  10. resolve(res.data);
  11. })
  12. .catch(err => {
  13. reject(err.data)
  14. })
  15. });
  16. }

get

  1. /**
  2. * get方法,对应get请求
  3. * @param {String} url [请求的url地址]
  4. * @param {Object} params [请求时携带的参数]
  5. */
  6. export function get(url, params) {
  7. return new Promise((resolve, reject) => {
  8. axios.get(url, {
  9. params: params
  10. }).then(res => {
  11. resolve(res.data);
  12. }).catch(err => {
  13. reject(err.data)
  14. })
  15. });
  16. }

vue中api的封装

首先在api.js中引入在http.js中封装的get和post两种方法。

  1. import { get, post } from './http'

不同参数的封装接口方法

  1. export const Login = p => get('/api/admin/login', p);
  2. export const Registry = p => post('/api/admin/registry', p);
  3. //路径参数封装
  4. //export const Api= p => post('/api/'+ p);
  5. //多参数封装
  6. export const Api=( pq )=> post('/api/'+ p+“/"+q);

页面中使用方法

  1. import { Login,Registry } from "@/request/api"
  2. export default {
  3. name:"app",
  4. data(){
  5. return{
  6. message:{
  7. uname:"",
  8. upwd:""
  9. }
  10. }
  11. },
  12. methods:{
  13. login(){
  14. Login(this.message).then(res=>{
  15. ....请求成功的处理
  16. })
  17. }
  18. }
  19. }

例外附上:

  1. gulp安装与使用
  2. 搭建基于webpack的vue环境
  3. 浅谈Vue项目优化心得
  4. 总结:搭建Vue项目心得
  5. 总结:vue中Axios的封装-API接口的管理

Vue中axios的封装和api接口的统一管理的更多相关文章

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

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

  2. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  3. vue中axios的封装以及简单使用

    一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...

  4. vue中axios使用封装

    一.在main.js导入 // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS f ...

  5. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

  6. vue中axios复用封装

    ajax2: function() { let that = this; return that .$http({ method: "get", url: "/Home/ ...

  7. vue中axios的封装(注意这里面异步的概念和用法十分重要)

    todo https://www.cnblogs.com/chaoyuehedy/p/9931146.html

  8. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  9. vue中axios的深入使用

    如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

随机推荐

  1. SpringBoot区块链之以太坊开发(整合Web3j)

    最近公司需要ETH兑换功能,ETH转账需要区块打包,这个时候就需要区块检测,目前只是简单整合,后面会将区块自动检测代码上传致QQ群 对于区块链开发不太熟悉的童鞋,可以看看:[区块链开发(零)如何开始学 ...

  2. java线上cpu、内存问题排查方法

    一.线程 查进程中占用cpu高的线程 ps -mp xxxxx -o THREAD,tid,time | sort -rn 将线程的id从10位转到16位,可以在下面jstack中找到对应线程 输出线 ...

  3. HTML表格列表简介

    HTML简介: html列表: ol标签:order list 有序列表. ul标签:unorder list 无序列表. li标签:list item 列表项. style属性: 标签内写css表达 ...

  4. svn新建文件不能提交的解决方法

    svn新建文件不能提交的解决方法 在当前新建文件的目录下,右键空白处: 选择Properties 找到所有有ignore字眼的属性,查看这个属性的继承目录(inherited from),入我的是cl ...

  5. 夯实Java基础系列6:一文搞懂抽象类和接口,从基础到面试题,揭秘其本质区别!

    目录 抽象类介绍 为什么要用抽象类 一个抽象类小故事 一个抽象类小游戏 接口介绍 接口与类相似点: 接口与类的区别: 接口特性 抽象类和接口的区别 接口的使用: 接口最佳实践:设计模式中的工厂模式 接 ...

  6. [python]python的异常处理

    异常处理:首先了解异常,程序出现逻辑错误或者用户输入不合法都会引发异常,而这些异常并不是致命的所以不会导致程序崩溃死掉.可以利用Python提供的异常处理机制在异常出现时及时捕获,并从内部自我消化. ...

  7. CentOS 8 正式发布

    转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net] 本文地址:https://www.oschina.net/news/110111/centos-8-re ...

  8. Redis 主从,哨兵,集群实战

    下载地址及版本说明 Redis 各版本下载地址: http://download.redis.io/releases/ 版本说明:一般来说版本号第二位,偶数是稳定版本,奇数是在开发中的版本 本文基于R ...

  9. Apache和Tomcat 配置负载均衡(mod-proxy方式)-粘性session

    Tomcat集群配置后端Tomcat Server为支持AJP的独立服务,前端Apache配置为粘性会话(sticky-session),Tomcat不配置Cluster配置和Session复制. 配 ...

  10. springboot 项目打包部署后设置上传文件访问的绝对路径

    1.设置绝对路径 application.properties的配置 #静态资源对外暴露的访问路径 file.staticAccessPath=/upload/** #文件上传目录(注意Linux和W ...