vue2 + axios http請求封裝

此版本封裝主要是對請求封裝,攔截什么的沒做處理。主要是處理了請求的方式是post還是get請求做了處理,新建一個(gè)http.js,代碼如下:

import Qs from 'qs'
import axios from "axios"
axios.defaults.timeout = 15000;

axios.defaults.transformResponse = [function (data) {
  data = JSON.parse(data)
  return data
}]

axios.interceptors.request.use(function(config) {
  console.log("請求開始")
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use((res) => {
  console.log("請求結(jié)束 ")
  return res;
}, (error) => {
  return Promise.reject(error);
});

function http(type,url, params,contentType) {
  let contType = contentType=='json' ? 'application/json':'application/x-www-form-urlencoded'
  let paramstranform = contentType == 'json' ? params : Qs.stringify(params)
  if(type == "get"){
    return new Promise((resolve, reject) => {
      // alert("axios-token:::"+localStorage.token)
      axios({
        method:'get',
        url:url,
        headers: {'token' : localStorage.token},
        params:params
      })
      // axios.get(url, { params: params },{headers : {'token' : localStorage.token}})
      .then((res) => {
        resolve(res.data)
      }).catch(err => {
        if (err == "Error: timeout of 15000ms exceeded") {
          console.log("服務(wù)器請求超時(shí)")
          return
        }
        alert(err)
      })
    })
  }else{
    return new Promise((resolve,reject)=>{
       axios({
        method:'post',
        url:url,
        headers: {'Content-Type': contType},
        data:paramstranform
      })
      // axios.post(url,paramstranform,{headers:{'Content-Type': contType,'token' : localStorage.token}})
      .then((res)=>{
        resolve(res.data)
      }).catch(err=>{
        if(err == "Error: timeout of 15000ms exceeded"){
          alert("服務(wù)器請求超時(shí),請刷新頁面重新進(jìn)入")
        }
        alert(err)
      })
    })
  }
}

export default http

在在main.js里引用

import httpRequest from '@/config/http'  具體的地址還有文件名自己改寫
Vue.prototype.$http = httpRequest //定義一個(gè)全局變量

在文件或者模板文件里運(yùn)用如下;

getList(){
        this.$http('post',this.baseUrl+'/tag/theme/list').then((res) => {
           console.log(res)
        });
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評論 25 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評論 19 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,662評論 18 399
  • 明天就要考試了。 劉洋萬里還有32個(gè)考點(diǎn)沒有看完。 “媽媽呀,要死了要死了。” 突然,300塊錢租來的簡陋房間里唯...
    時(shí)靈時(shí)不靈靈靈閱讀 583評論 0 3
  • “你為什么總是需要身邊有人?” 在室友們集體出游后的一個(gè)晚上,我一個(gè)人獨(dú)自坐在書桌旁,默默的問自己。 “不,我可以...
    獨(dú)行的小叛逆閱讀 431評論 0 0

友情鏈接更多精彩內(nèi)容