axios库二次封装
1、新建utils文件夹,在文件夹里面新建reques.js
import axios from \'axios\'; import { Message, Loading } from \'element-ui\' import qs from \'qs\'; //参数序列化,把数据格式转为 x-www-form-urlencoded let BASE_URL = \'\', loadingInstance; let HOST = process.env.NODE_ENV; switch (HOST) { case \'development\': BASE_URL = \'http://localhost:888\'; break; case \'test\': BASE_URL = \'http://192.168.101.21/foxcubeCrm/\'; break; default: BASE_URL = \'http://192.168.101.21/foxcubeCrm/\'; } axios.create({ //crossDomain: true,//设置cross跨域 withCredentials: false, //跨域请求是否允许携带cookie资源凭证 baseurl: BASE_URL, time: 1000 //请求超时时间 // responseType:"arraybuffer" 返回的数据格式 }) // request请求拦截器 axios.interceptors.request.use(config => { // let token=localstorage.getItem(\'token\'); // token && (config.headers.Authorization=token);//请求携带token // config.headers = { // \'Content-Type\': \'application/x-www-form-urlencoded\' //转换数据格式 // } loadingInstance = Loading.service({ lock: true, text: \'飞速加载中……\', }); return config; }, error => { return Promise.reject(error); }) // 成功状态 有3的接口一般是资源重定向 // service.defaults.validateStatus=status=>{ // return /^(2|3)\d{2}$/.test(status); // }; // response响应拦截器 axios.interceptors.response.use(response => { setTimeout(() => { loadingInstance.close(); }, 300) return response; }, error => { setTimeout(() => { loadingInstance.close(); }, 300) let { response } = error; if (response) { //服务器有返回内容 var errormsg = \'\'; switch (response.status) { case 400: errormsg = \'错误请求\' break; case 401: errormsg = \'未登录,请重新登录\' break; case 403: errormsg = \'决绝访问\' break; case 404: errormsg = \'请求错误,未找到该资源\' break; case 405: errormsg = \'请求方法未允许\' break; case 408: errormsg = \'请求超时\' break; case 500: errormsg = \'服务器出错\' break; case 501: errormsg = \'网络未实现\' break; case 502: errormsg = \'网络错误\' break; case 503: errormsg = \'服务不可用\' break; case 504: errormsg = \'网络超时\' break; case 505: errormsg = \'http版本不支持该请求\' break; default: errormsg = \'连接错误\' } Message({ type: \'warning\', message: errormsg }); return false; } else { //服务器连结果都没有返回 有可能是断网或者服务器奔溃 if (!window.navigator.online) { //断网处理 Message(\'网络中断\'); return; } else { //服务器奔了 Message(\'服务器奔了\'); return Promise.reject(error); } } }) /* *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); }) }); } /* *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); }) }); } /* *封装patch请求 *@param url * @param params * @returns {Promise} */ export function patch(url, params) { return new Promise((resolve, reject) => { axios.patch(url, params) .then(res => { resolve(res.data); }, err => { reject(err); }) }) } /* *put 请求 *@param url * @param params */ export function put(url, params) { return new Promise((resolve, reject) => { axios.put(url, params) .then(res => { resolve(res.data); }, err => { reject(err); }) }) }
2.新建api文件夹,在api文件夹里创建对应模块的js,写接口调用的方法
import {post,get,put,patch} from \'@/utils/request\'
export const login = params =>post(\'/api/login\',params)
3.在login.vue直接引入该方法就可以直接使用
import { login } from "@/api/login"; login(data).then(res=>{ })
4.也可以在main.js引入直接到挂载到原型prototype上
import { post, get, put, patch } from \'./utils/request\' // 挂载到原型上 Vue.prototype.$post = post; Vue.prototype.$get = get;
在需要使用请求数据的地方直接使用就ok
this.$post(\’/api/login\’,data).then(res=>{
console.log(res)
})
需要的可以直接下载代码 https://github.com/doujiangtao/vuexcms
版权声明:本文为h5it原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。