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

vue中axios的封装

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

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

安装

npm install axios; //安装axios
//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不同环境配置不同打包命令

// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}

请求默认值的设置

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

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

设置默认请求头和token

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

请求拦截

token拦截

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

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

响应拦截

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

axios.interceptors.response.use(function (response) {
if (response.status >= 400) {
localStorage.clear();// 删除已经失效或过期的token(不删除也可以,因为登录后覆盖)
router.replace({
path: '/login', // 到登录页重新获取token
query: {
//回到当前页面
redirect: router.currentRoute.fullPath
}
})
}
return response }, function (error) {
if (error.response) {
if(error.response.status===403){
Message({
showClose: true,
message: '登录过期',
type: 'error'
});
localStorage.clear();
Cookies.set("user","",-10);
router.replace({
path: '/login' // 到登录页重新获取token
})
}else if(error.response.status===405){
Message({
showClose: true,
message: '权限不足,请联系管理员',
type: 'warning'
});
router.replace({
path: '/error',
})
}else if(error.response.status===500){
Message({
showClose: true,
message: '服务器异常',
type: 'error'
});
}
}
return Promise.reject(error)
})

封装get和post方法

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

post

/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}

get

/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}

vue中api的封装

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

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

不同参数的封装接口方法

export const Login = p => get('/api/admin/login', p);
export const Registry = p => post('/api/admin/registry', p);
//路径参数封装
//export const Api= p => post('/api/'+ p);
//多参数封装
export const Api=( p,q )=> post('/api/'+ p+“/"+q);

页面中使用方法

import { Login,Registry } from "@/request/api"
export default {
name:"app",
data(){
return{
message:{
uname:"",
upwd:""
}
}
},
methods:{
login(){
Login(this.message).then(res=>{
....请求成功的处理
})
}
}
}

例外附上:

  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. 脱离脚手架来配置、学习 webpack4.x (二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提前等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

  2. 云服务器 ECS Linux 系统 MySQL 备份的导入导出

    MySQL 备份的导出 注意: 如果您使用的是帮助中心的一键环境配置,那么 MySQL 的安装目录是 /alidata/server/mysql. 如果您将 MySQL 安装到其他目录,您需要输入您 ...

  3. 客户端与服务端的事件watcher源码阅读

    watcher存在的必要性 举个特容易懂的例子: 假如我的项目是基于dubbo+zookeeper搭建的分布式项目, 我有三个功能相同的服务提供者,用zookeeper当成注册中心,我的三个项目得注册 ...

  4. 【数据结构与算法】--JavaScript 链表

    一.介绍 JavaScript 原生提供了数组类型,但是却没有链表,虽然平常的业务开发中,数组是可以满足基本需求,但是链表在大数据集操作等特定的场景下明显具有优势,那为何 JavaScript 不提供 ...

  5. 从零开始用golang创建一条简单的区块链

    区块链(Blockchain),是比特币的一个重要概念,它本质上是一个去中心化的数据库,同时作为比特币的底层技术,是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一批次比特币网络交易的信息 ...

  6. JS中数据类型转换

    JS中数据类型转换汇总 JS中的数据类型分为 [基本数据类型] 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined [引用数据类型] 对象 obj ...

  7. Hadoop源代码点滴-文件系统HDFS

    HDFS是Hadoop集群的文件系统,这是一种分布(distributed).容错(fault tolerant)的文件系统 所谓分布,是说整个文件系统的内容并非集中存储在一台或几台“文件服务器上”, ...

  8. dubbo-spring-boot的auto-configure示例报Not found exported service的解决办法

    本示例基于dubbo-spring-boot-project 2.7.3版本,可能会根据新版的发布而过时,阅读时请注意. 关于dubbo在spring-boot中该如何使用,网上有很多例子,但因为时间 ...

  9. 利用Code::Blocks搭建64位C++开发平台

    0.前言 随着64位计算机的普及,编写64位程序成为程序员基本的要求.我在<体验Code::Blocks下的C++编程>中描述了利用Code::Blocks官方提供的封装了编译器的安装包( ...

  10. 阿里云Centos操作Mysql

    1.  CentOS7 yum方式安装MySQL5.7 2.Centos下mysql导入sql 3.Centos设置远程 4.CentOS下mysql数据库常用命令总结 5.centos出现“Fire ...