Vue中Axios的封裝

參考https://www.cnblogs.com/chaoyuehedy/p/9931146.html

一、環境的切換

if (process.env.NODE_ENV === 'development') {            //開發環境
    axios.defaults.baseURL = 'https://www.baidu.com'
  } else if (process.env.NODE_ENV === 'debug') {         //測試環境
    axios.defaults.baseURL = 'https://www.ceshi.com'
  } else if (process.env.NODE_ENV === 'production') {    //生產環境
     axios.defaults.baseURL = 'https://www.production.com'
  }

二、設置請求超時

axios.defaults.timeout = 5000

三、post請求頭設置

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

四、響應的攔截

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 404:
            router.push('/notfounted')
            break
          default: Notification.error({
            title: '錯誤',
            message: '服務器錯誤,或網絡錯誤',
            offset: 100,
              duration:1500
            });
        }
        return Promise.reject(error.response)
      }
    }
  )

五、封裝get方法

 /**
  * get方法,對應get請求
  * @param {String} url [請求的url地址]
  * @param {Object} params [請求時攜帶的參數]
  */
export function get(url,params){
    return new Promise((resolve, reject) =>{
        axios.get(url,params)
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

六、post封裝方法

/**
  * 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)
        })
    });
}

也可以參考:https://zhanghao-web.github.io/2019/03/29/Vue/vue%E4%B8%ADaxios%E8%AF%B7%E6%B1%82%E7%9A%84%E5%B0%81%E8%A3%85/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章