vue axios 封装请求
1.建立http.js文件(内容如下)import axios from 'axios';// 引入axiosimport qs from 'qs'; //post 参数序列化//环境切换axios.defaults.baseURL = "http://192.168.0.70"; // 测试环境// 请求超时 请求头axios.defaults.timeout = 10000axios.defa
·
1.建立http.js文件(内容如下)
import axios from 'axios';// 引入axios import qs from 'qs'; //post 参数序列化 //环境切换 axios.defaults.baseURL = "http://192.168.0.70"; // 测试环境 // 请求超时 请求头 axios.defaults.timeout = 10000 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 = window.localStorage['token']; //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: alert(401) // router.replace({ // path: '/login', // query: { redirect: router.currentRoute.fullPath } // }); break; case 403: alert("登录过期,请重新登录") // 清除token // localStorage.removeItem('token'); // store.commit('loginSuccess', null); // setTimeout(() => { // router.replace({ // path: '/login',// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面 // query: { // redirect: router.currentRoute.fullPath // } // }); // }, 1000); break; // 404请求不存在 case 404: alert("地址不存在") break; // 其他错误,直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response); } } ); /** * 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(response => { resolve(response.data); },err => { reject(err) }) }) } /** * put 请求 * @param url * @param params */ export function put(url,params){ return new Promise((resolve,reject) => { axios.put(url,params) .then(response => { resolve(response.data); },err => { reject(err) }) }) }
1.建立api.js文件(内容如下)
// 包装请求api . 使用: import { register } from '@/request/api';// 导入api接口 import {post,get,put,patch} from './http' /** * 采暖申请 ,停止申请,异常登记 **/ export const Heating = params => post('/hz/api/Event/InserEvent',params) /** * 采暖申请查询 ,停止申请询,异常登记询 **/ export const SearchHeate = params => get('/hz/api/Event/GetEventByType',params)
3.页面使用(看内容)
import {Heating,SearchHeate} from "../../api/api";引入
点击HeatingBtn(id){ if(id===0){ let params={ xxx:xxx } Heating(params).then(res=>{ console.log(res) }) }
更多推荐
已为社区贡献1条内容
所有评论(0)