资讯专栏INFORMATION COLUMN

记录 关于axios封装

testbird / 2762人阅读

摘要:废话不多说,直接上代码,本人也是菜鸡如果有什么不对请指教为组件的插件按需引入。引入设置请求时间响应拦截器如果返回的状态码为,说明请求数据成功注是我和公司后台约定的状态码,具体的随机应变否则的话抛出错误请求不存在封装方法封装请求

废话不多说,直接上代码,本人也是菜鸡 如果有什么不对请指教~
ps: message为iview组件的插件 按需引入。

// 引入axios
import axios from "axios";
import { Message } from "iview"
import store from "./../store"
import router from "./../router"


if (process.env.NODE_ENV == "development") {    
  axios.defaults.baseURL = "/api";} 
else if (process.env.NODE_ENV == "debug") {    
  axios.defaults.baseURL = "";
} 
else if (process.env.NODE_ENV == "production") {    
  axios.defaults.baseURL = "./";
}


axios.defaults.timeout = 60000; //设置请求时间

// 响应拦截器
axios.interceptors.response.use(    
  response => {   
      // 如果返回的状态码为0000,说明请求数据成功(注:0000是我和公司后台约定的状态码,具体的随机应变)     
      // 否则的话抛出错误{  
          if(response.data.retCode != "0000"){
            store.commit("common/defaultEntity", {
              retCode: response.data.retCode,
              retMsg: response.data.retMsg
            })
            router.push({ path: "/error"}); 
          }
          return Promise.resolve(response);      
  },  
  error => {
    store.commit("common/defaultEntity", {
      retCode: error.response.status,
      retMsg: "请求不存在"
    })
    router.push({ path: "/error"});   
    return Promise.reject(error.response);
  }    
);




/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
*/
export function fetch(url,params={}){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
    })
  }
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data).then(response => {
        resolve(response.data);
        },err => {
        reject(err)
        })
    })
 }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103838.html

相关文章

  • axios 的二次封装(拦截重复请求、异常统一处理)

    摘要:拦截重复请求如何标识每个请求下面函数,通过一个请求参数中的请求传递参数或请求传递参数来表示每一个请求。 一直想封装一下 axios, 可以方便项目中使用,今天有时间,就好好研究了一下。 源码: // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...

    luzhuqun 评论0 收藏0
  • 你知道前端对图片的处理方式吗?

    摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...

    helloworldcoding 评论0 收藏0
  • 你知道前端对图片的处理方式吗?

    摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...

    LiuRhoRamen 评论0 收藏0
  • 你知道前端对图片的处理方式吗?

    摘要:对于第二种存储方式,我们前端需要将其二进制流交由对象处理,然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候,就像我第一里的情景再现说的,前端用容器接收。 前言 作为前端工程师 de 我们,日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们,感受可能会更加的明显。 以下是我之前跟图片打交道踩到的坑,跟大家分享一下经验。 一、情景再现 用postman请求接口...

    Zachary 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<