基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

如果还对axios不了解的,可以移步axios文档axios使用说明

安装

npm install axios --save

在项目src下新建request/http.js文件,并引入axios

/**
* axios封装:请求拦截,响应拦截,错误编码
*/
import axios from 'axios'

设置请求超时时间

/**
* 默认10S请求超时
*/
axios.defaults.timeout = 10000;

设置post请求头

/**
* 设置post请求头
*/
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

设置拦截器拦截请求

/**
* 请求拦截器
*/
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
}
)

响应请求拦截以及返回服务器状态码

// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
)

封装get请求和post请求

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

vue.js中axios的封装的更多相关文章

  1. vue项目中axios的封装和使用

    一.axios的功能特点 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求 ...

  2. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

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

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

  4. 聊聊 Vue 中 axios 的封装

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

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

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

  6. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  7. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  8. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  9. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

随机推荐

  1. VS 编译通过后 链接提示 无法使用的外部符号

    1. 检查是否已经链接了需要的.lib静态库,如果是自己定义的头文件,检查cpp文件是否添加到了VS工程里 2. 头文件尽量不要包含其他头文件,容易造成包含混乱,如头文件里使用了自定义的类名,最好只用 ...

  2. ActiveMQ(3)---ActiveMQ原理分析之消息持久化

    持久化消息和非持久化消息的存储原理 正常情况下,非持久化消息是存储在内存中的,持久化消息是存储在文件中的.能够存储的最大消息数据在${ActiveMQ_HOME}/conf/activemq.xml文 ...

  3. python基础1.0

    1. python简介:解释性语言 安装python,注意路径加入path python的解释器,cpython,Python的解释器很多,但使用最广泛的还是CPython.如果要和Java或.Net ...

  4. 机器学习-Sklearn

    Scikit learn 也简称 sklearn, 是机器学习领域当中最知名的 python 模块之一. Sklearn 包含了很多种机器学习的方式: Classification 分类 Regres ...

  5. POI 使用颜色字符串生成XSSFColor对象

    public static int[] hexToRgb(String hex) { String colorStr = hex; if (hex.startsWith("#")) ...

  6. 用python发送短消息(基于阿里云平台)

    新版短信接口在线测试页面:https://api.aliyun.com/new#/?product=Dysmsapi&api=SendSms&params={}&tab=DEM ...

  7. git取别名配置

    已经配置的别名 $ git config --global alias.st status $ git config --global alias.co checkout $ git config - ...

  8. 执行makemigrations后错误集锦

    在项目配置xadmin后,执行python manage.py makemigrations后出现了很多问题: 1.ModuleNotFoundError: No module named 'futu ...

  9. leetcode268缺失数字

    int missingNumber(int* nums, int numsSize) { ) /; ;i<numsSize;i++){ sum = sum - nums[i]; } return ...

  10. ssh登录locale报错:cannot change locale (zh_CN.UTF-8): No such file or directory

    一.登录ssh报错: Last :: from 172.28.146.109 -bash: warning: setlocale: LC_ALL: cannot change locale (en_C ...