vue中axios的使用与封装
2019-03-04 09:53:59来源:博客园 阅读 ()
分享下我自己的axios封装
axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理
当然首先是npm安装axios 很简单$ npm install axios --save
在src下新建文件夹 service / index.js
接着上代码
1 import axios from 'axios';
2 import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示
3 import router from '../router'
4
5 // 默认超时设置
6 axios.defaults.timeout = 50000;
7
8 // 相对路径设置
9 axios.defaults.baseURL ='';
10
11 //http request 拦截器
12 axios.interceptors.request.use(
13 config => {
14 // 获取token
15 const token = localStorage.getItem('cc_token');
16 // 设置参数格式
17 if(!config.headers['Content-Type']){
18 config.headers = {
19 'Content-Type':'application/json',
20 };
21 }
22 // 添加token到headers
23 if(token){
24 config.headers.token = token
25 }
26 // 鉴权参数设置
27 if(config.method === 'get'){
28 //get请求下 参数在params中,其他请求在data中
29 config.params = config.params || {};
30 let json = JSON.parse(JSON.stringify(config.params));
31 //一些参数处理
32 }else{
33 config.data = config.data || {};
34 //一些参数处理
35 }
36 return config;
37 },
38 err => {
39 return Promise.reject(err);
40 }
41 );
以上请求之前的一些处理就完成了
下面是获得返回的一些处理
//http response 拦截器
axios.interceptors.response.use(
response => {
//一些统一code的返回处理
if(response.data.code === 501){
// 登录验证
//做了个示例跳转项目中登录,并记录下相对路径
router.push({
name:'login',//从哪个页面跳转
query:{
retUrl:window.location.href.split('#')[1] || '',
is_new_user_url:1
}
})
}
return response;
},
error => {
return Promise.reject(error)
}
);
接着把所有请求类型都做下简单封装
/**
* 封装get方法
* @param url
* @param params
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
if(response.data.code === 200){
//返回成功处理 这里传的啥 后续调用的时候 res就是啥
resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了
}else{
//错误处理
Toast(response.data.msg)
}
})
.catch(err => {
reject(err);
let message = '请求失败!请检查网络';
//错误返回
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
if(response.data.code === 200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err => {
reject(err);
let message = '请求失败!请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
if(response.data.code === 200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err => {
reject(err);
let message = '请求失败!请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
if(response.data.code === 200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err => {
reject(err);
let message = '请求失败!请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
export function del(url,data = {}){
return new Promise((resolve,reject) => {
axios.delete(url,data)
.then(response => {
if(response.data.code === 200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err => {
reject(err);
let message = '请求失败!请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
好了 主要的文件编辑好 然后在service中新建api.js文件并引入对应组件方法
import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;
接着就可以开始写各个API方法了
//也可以不需要
const _baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径
//登录方法
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//修改账号信息RESTful
const editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//等等...
最后是使用,非常简单方便,在vue文件中引入并使用
import { loginApi ,editAdminListApi } from "../../service/api";
export default {
methods:{
//登录
login(){
let json = {
userName:'xx',
password:'xx'
}
loginApi().then(res=>{
console.log(res)
})
},
// RESTful 修改信息
editAdminList(){
let id = 1;
let json = {name:11};
editAdminListApi(id,json).then(res=>{
console.log(res)
})
}
}
}
使用方便简洁。
over
原文链接:https://www.cnblogs.com/wangwBlogs/p/10471826.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:按钮浮动效果和绝对路径的有关问题
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- vue.js开发环境搭建教程 2020-03-16
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash