在vue項目中的axios使用配置記錄

Magicer 發布于2019-08-22 15:02 / 1092人閱讀

摘要：默認項目中已經安裝，基于開發，主要記錄配置的相關。響應時間配置配置請求頭靜態資源配置接口地址傳參序列化添加請求攔截器數據加載中，請稍后請求錯誤返回狀態判斷添加響應攔截器請求失敗，請稍后再試發送請求配置組件內部的調用

默認vue項目中已經安裝axios，基于element-ui開發，主要記錄配置的相關。

axiosConfig.js

import Vue from "vue"
import axios from "axios"
import qs from "qs"
import { Message, Loading } from "element-ui"
// 響應時間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置請求頭
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"
// 靜態資源
Vue.prototype.$static = ""

// 配置接口地址
axios.defaults.baseURL = ""
var loadingInstance
// POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: "數據加載中，請稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    })
    if (config.method === "post") {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  err => {
    loadingInstance.close()
    Message.error("請求錯誤")
    return Promise.reject(err)
  }
)
// 返回狀態判斷(添加響應攔截器)
axios.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      loadingInstance.close()
      return res
    } else {
      loadingInstance.close()
      Message.error(res.data.msg)
    }
  },
  err => {
    loadingInstance.close()
    Message.error("請求失敗，請稍后再試")
    return Promise.reject(err)
  }
)
// 發送請求
export function fetchPost (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err.data)
        }
      )
      .catch(err => {
        reject(err.data)
      })
  })
}
export function fetchGet (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

main.js 配置

import { fetchGet, fetchPost} from "./api/axiosConfig"
Vue.prototype.$get = fetchGet
Vue.prototype.$post = fetchPost

組件內部的調用

getData () {
  let params = {
    userId: this.userId
  }
  this.$get("/xxx", params).then(res => {
    this.listsData = res.data
  }).catch(() => {
  })
}

GPU云服務器云服務器 webrtc項目中的stl庫在哪里云服務器搭建vue項目域名中的記錄值騰訊云服務器部署vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93114.html

Vue入坑筆記

摘要：近段時間常使用開發，寫點記錄，避免時間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內外的話，會出現該錯誤。近段時間常使用vue-cli開發，寫點記錄，避免時間久之忘了。環境 1. nodejs　　vue-cli開發基于nodejs環境，確保開發的環境中已安裝了nodejs。　　安裝教程 https://www....

superw 2019-08-26 12:16 評論0 收藏0
node-vue前后端分離記錄

摘要：用于列表渲染，可以循環遍歷數組和對象注意目前指的是的迭代事件綁定，簡寫相當于與相比，避免了閃現的問題。 node vue項目開發看了近一周的vue開發，有諸多感觸，我之前接觸過react、angular所以特別想學學久仰大名的vue。學習半天以后發現，接觸到的東西多了，學習起來就是容易很多，vue的指令我能個聯想到angular的指令，vue組件化設計類似于react的組件化設計，包...

lowett 2019-08-22 13:41 評論0 收藏0
vue+node+mysql搭建個人博客（一）

摘要：其中用來完成請求，將添加的原型上后就不需要再在每個需要使用它的頁面引入了每個頁面都相當于一個組件，文件以結尾，第一次啟動成功時看到的頁面就是組件，路徑。學習筆記...在線地址：cl8023.com github 數據庫已改為mongodb 快速搭建 node 后端服務Github-quick-node-server 準備工作安裝node，這是必須的新版node自帶npm...

peixn 2019-08-21 17:48 評論0 收藏0
基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0
vue 項目總結一文件夾結構配置

摘要：文件夾結構文件夾里的文件夾設置是靈活的，可以根據自己的習慣進行，不必雷同。對文件夾配置的總結先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結，有需要的可以去看看。之前一段時間都在使用 vue 開發后臺管理系統，在摸索的過程中對 vue 本身和模塊化、規范化開發有了更深的認知，現在記錄下來，希望對其他需要開發項目的人有幫助。項目配置首先，在確定好使用的框架和組件庫后，先...

spacewander 2019-08-02 16:00 評論0 收藏0