vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装

vue请求拦截给所有的api接口的请求 params 带上一个存储的值：

Vue.prototype.$http = axios;
// 设置请求拦截器，为请求对象添加token，这是后续权限api要求的
Vue.prototype.$http.interceptors.request.use(req => {// req就是请求对象console.log(req)// 基于请求拦截器显示响应进度条// NProgress.start();// 为请求对象设置携带token的属性// req.headers.Authorization = window.sessionStorage.getItem('token');let token = window.sessionStorage.getItem('token')// let token = window.sessionStorage.getItem('token') if (token) {req.data['token'] = token}// 最后必须返回reqreturn req;
});
// 设置响应拦截器
Vue.prototype.$http.interceptors.response.use(res => {// 基于响应拦截器隐藏响应进度条// NProgress.done();return res;},err => {// 当服务器离线无法登录，给一下提示信息console.log(err)if (err == "Error: Request failed with status code 401") {router.push("/");NProgress.done();return Vue.prototype.$message.error('登录信息失效！请重新登录');}if (err == "Error: Request failed with status code 403" || err == "Error: Request failed with status code 409" || err == "Error: Request failed with status code 405") {Vue.prototype.$message.error('该账号无权访问！');NProgress.done();return Promise.reject(err);} else {// 当服务器离线无法登录，给一下提示信息Vue.prototype.$message.error('服务器网络错误！');NProgress.done();console.log('服务器网络错误！');return Promise.reject(err);}}
);

vue中qs的安装（序列化字符串，处理发送请求的参数）

npm install qs

引入

import qs from ‘qs’

使用

let data = qs.stringify({"username":this.username,"password":this.password
});

处理完格式就是这样的username=renping&password=123456

qs主要有两个方法：

方法一：将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）

qs.stringify()   转换成查询字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)

方法二：将序列化的内容拆分成一个个单一的对象

qs.parse() 转换成json对象let comValue = qs.parse(comments)

vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装相关推荐

[js] 一个api接口从请求数据到请求结束共与服务器进行了几次交互？
[js] 一个api接口从请求数据到请求结束共与服务器进行了几次交互? API是一些预先定义的函数,或指软件系统不同组成部分衔接的约定.如果已经建立了连接,那么单次请求数据到请求结束应该是一次交互:如 ...
php 查询域名被注册,查询域名是否被注册 API 接口调用请求
原标题:查询域名是否被注册 API 接口调用请求查询域名是否被注册 API 接口在网上已经很多且大都封装成了 API 供别人调用,以GET/POST方式提交即可.查询域名是否被注册 API 接口可以 ...
tmall.product.schema.get( 淘宝天猫商品发布API接口) ，淘宝商品发布API接口，淘宝店铺上传API接口，oAuth2.0店铺上传API接口
tmall.product.schema.get( 淘宝天猫商品发布API接口) ,淘宝商品发布API接口,淘宝店铺上传API接口,oAuth2.0店铺上传API接口,可适用于店铺上传商品,店铺发货, ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
wsdl接口调用请求消息xml_短网址生成 API 接口调用请求
短网址生成 API 接口在网上已经很多且大都封装成了 API 供别人调用.支持前台跨域请求,以GET/POST方式提交即可.短网址生成 API 接口可以将长网址缩短成短网址,支持百度.新浪.suoim ...
yii2 跨域请求配置_手机号归属地查询 API 接口调用请求
手机号归属地查询 API 接口在网上已经很多且大都封装成了 API 供别人调用.支持前台跨域请求,以GET方式提交即可.手机号归属地查询 API 接口可以查询手机的归属地详细信息,你可以选择调用本站的 ...
咕咕机显示服务器请求异常,咕咕机API接口说明.PDF
咕咕机API接口说明咕咕机API 接口说明版本号修订日期修订人修订描述 V0.1 2015-06-15 Jeri 初版 V0.2 2015-10-25 Jeri 更新中文字符需要GBK 格式 ...
看看人家那后端API接口写得，那叫一个优雅！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源:r6d.cn/tEvn 在移动互联网,分布式.微服务 ...
计算机前后端接口,看看别人后端API接口写得，那叫一个优雅！
在分布式.微服务盛行的今天,绝大部分项目都采用的微服务框架,前后端分离方式.题外话:前后端的工作职责越来越明确,现在的前端都称之为大前端,技术栈以及生态圈都已经非常成熟:以前后端人员瞧不起前端人员,那 ...

vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装

vue请求拦截给所有的api接口的请求 params 带上一个存储的值：

vue中qs的安装（序列化字符串，处理发送请求的参数）

引入

使用

qs主要有两个方法：

vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装相关推荐

最新文章

热门文章

vue请求拦截 给所有的api接口的请求 params 带上一个存储的值及qs的安装

vue请求拦截 给所有的api接口的请求 params 带上一个存储的值：

vue中qs的安装（序列化字符串，处理发送请求的参数）

引入

使用

qs主要有两个方法 ：

vue请求拦截 给所有的api接口的请求 params 带上一个存储的值及qs的安装相关推荐

最新文章

热门文章

vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装

vue请求拦截给所有的api接口的请求 params 带上一个存储的值：

qs主要有两个方法：

vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装相关推荐