创建axios

简单的封装一下axios请求 
    
    
   ，包含了请求前的处理
     


     


     

，返回结果和请求异常处理

import axios from "axios"; import store from "../store.js"; //封装axios axios.defaults.headers["Content-Type"] = "application/json"; //创建axios实例 const service = axios.create({ baseURL: process.env.NODE_ENV == "dev" ? "/api" : process.env.VUE_APP_BASE_API, //本地测试跨域配置 timeout: 130000, //请求超时 withCredentials: true //跨域请求时发送Cookie });

request拦截器

请求前的处理

const TIME_ZONE = "timeZone"; //http request 拦截器 service.interceptors.request.use( config => { // showProgress 是否显示Loading框 if (!(config.data && config.data.showProgress)) { /* 请求显示Loading框 Toast.loading({ duration: 0, message: "Loading...", forbidClick: true }); */ } //获取token const token = window.localStorage.getItem("omni-token"); config.headers["xxx"] = token; // xxx服务器对应token名 //如果我们的应用是针对世界各地的 




 




 




，当要把后台(服务器)存的时间展示给不同地区的用户时 //这个时间应该经过时差转换    
    
    
、 转成用户客户端本地的时间 

   

   

  ，然后呈现给用户 //获得本地与格林威治时间的时差：new Date().getTimezoneOffset()
     

     

     
，单位为分钟    
    
    
。 let timezone = new Date().getTimezoneOffset() / -60; if (timezone > 0) { timezone = `+${timezone}:00`; } else { timezone = `${timezone}:00`; } config.headers[TIME_ZONE] = timezone; return config; }, error => { return Promise.reject(error); } );

response拦截器

返回结果和请求异常处理

//http response 拦截器 service.interceptors.response.use( response => { if (response.config.data) { let json = JSON.parse(response.config.data); if (!json.showProgress) { //Toast.clear(); } } else { //Toast.clear(); } const code = response.data.code; if (code === 401) { //token令牌过期失效 清空缓存 store.dispatch("tokenExpired"); } else if (code === 500) { //500错误 return null; } else { //接口请求正常 直接返回结果 return response; } return Promise.reject(response.data.message); }, error => { //接口请求异常  




  




  




，抛出异常信息 // Toast.fail({ // duration: 2000, // message: error.data.message, // closeOnClick: false, // closeOnClickOverlay: false, // }) // 1.判断请求超时 if (error.code === ECONNABORTED && error.message.indexOf(timeout) !== -1) { console.log(根据你设置的timeout/真的请求超时 判断请求现在超时了 


  


  


 ，你可以在这里加入超时的处理方案) // return service.request(originalRequest);//例如再重复请求一次 } // 2.需要重定向到错误页面 const errorInfo = error.response if (errorInfo) { // error = errorInfo.data if (errorInfo.status === 403) { router.push({ path: /error/403 }) } } return Promise.reject(error); } );

Get请求(Json)

export function requestGet(url, params = {}) { return new Promise((resolve, reject) => { service({ url: url, method: "get", params: params }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); }

Get请求(form表单提交)

export function requestGetForm(url, params = {}) { return new Promise((resolve, reject) => { service({ url: url, method: "get", data: null, params, headers: { "Content-Type": "application/x-www-form-urlencoded" } }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); }

Post请求(Json)

export function requestPost(url, params = {}) { return new Promise((resolve, reject) => { service({ url: url, method: "post", data: params }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); }

Post请求(form表单提交)

export function requestPostForm(url, params = {}) { return new Promise((resolve, reject) => { service({ url: url, method: "post", data: null, params, headers: { "Content-Type": "application/x-www-form-urlencoded" } }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); }

Post请求(文件上传)

export function requestFileUpload(url, params = {}) { return new Promise((resolve, reject) => { service({ url: url, method: "post", data: params, headers: { "Content-Type": "multipart/form-data" } }) .then(response => { resolve(response); }) .catch(error => { reject(error); }); }); }