1. 程式人生 > >Vue 中axios的基礎路徑怎麼設定

Vue 中axios的基礎路徑怎麼設定

在不通過介面檔案的情況下,如何使用axios呢?

在元件中呼叫axios,沒必要一定在介面檔案中設定,你可以選擇在入口檔案中設定基礎訪問路徑,在元件中通過this.axios這個方法傳送非同步請求即可。

舉個栗子吧↓

專案要求:

所有api的域名為:http://www.escook.cn:3000  如果後面文件中,有的域名地址和這裡不一樣,以這裡的為主;

請求介面:/api/getnewslist

請求方式:get

具體程式碼如下:

步驟一:入口檔案:main.js

import axios from 'axios';

axios.defaults.baseURL='http://www.escook.cn:3000 '

Vue.prototype.axios=axios   

    //注意:一定要把axios新增到vue的原型物件中

步驟二:元件:newList.vue

 created () {
    this.axios.get('/api/getnewslist').then(res=>{
         console.log(res) 
         this.newList=res.data.message
    })
  }

注意:this指代vue,要在axios前加上this

相關推薦

Vue axios基礎路徑怎麼設定

在不通過介面檔案的情況下,如何使用axios呢? 在元件中呼叫axios,沒必要一定在介面檔案中設定,你可以選擇在入口檔案中設定基礎訪問路徑,在元件中通過this.axios這個方法傳送非同步請求即可。 舉個栗子吧↓ 專案要求: 所有api的域名為:http://ww

Vueaxios的使用技巧配置項詳解

www 模塊 模擬 傳遞 all 字符串 給定 ans 必須 使用axios首先要下載axios模塊包 npm install axios --save 其次需要在使用的文件中引入 import axios from ‘axios‘ 一、調用axio

Vueaxios 表單POST提交

剛開始使用Vue,裡面的坑是一個接一個,今天就遇到一個axios POST傳參的問題。 因為後端要求是按表單提交的形式給他資料, 我需要在請求中傳遞引數,然後按官方文件的格式開始操作,程式碼如下: axios.post('/user', {   &nbs

vueaxios攔截器的使用

1.攔截器分為request請求攔截器和response響應攔截器 PS:request請求攔截器:傳送請求前統一處理,如:設定請求頭headers、應用的版本號、終端型別等。 response響應攔截器:有時候我們要根據響應的狀態碼來進行下一步操作,例如:由於當前的token過期,

vueaxios的統一封裝及調用

return efault timeout 實例 remote class this func 0ms 一、axios.js 1、安裝axios npm install axios --save 2、環境地址(config.js) export default {

Vue基礎過渡動畫原理解析

前言 在日常開發中 動畫是必不可少的一部分 不僅能讓元素直接的切換顯得更加自然 同時也能極大的增強使用者體驗 因此 在Vue之中也提供了非常強大的關於動畫這方面的支援 Vue不僅支援用CSS來寫一些過渡效果 同時也是支援JS的 不過在這個文章中講述的都是如何利用CSS來實現過渡動畫、keyframes動畫以

vueAxios的封裝和API介面的管理

如圖,面對一團糟程式碼的你~~~真的想說,What F~U~C~K!!! 迴歸正題,我們所要的說的axios的封裝和api介面的統一管理,其實主要目的就是在幫助我們簡化程式碼和利於後期的更新維護。 一、axios的封裝 在vue專案中,和後臺互動獲

關於vue圖片地址路徑的問題,框架element-ui自定義彈框,加入圖片

先說最緊要的: 路徑問題:在vue-cli3中public不被打包,src下的assets是被打包的,只能使用相對地址。最重要的是,template中img的src在打包後就變了,而動態建立的img直接加上相對地址後還是相對路徑的字串 結:動態建立的img之前需要直接

vueaxios的使用與封裝

vue中axios的使用與封裝 分享下我自己的axios封裝,多多點贊收藏~axios是個很好用的外掛,都是一些params物件,所以很方便做一些統一處理 當然首先是npm安裝axios 很簡單$ npm install axios --save在src下新建資料夾 service / index.js接

vueaxios資料請求 get和post

axios(基於 promise 的 HTTP 庫) <script src="./vue.js"></script> <!-- 1. 引入axios檔案 --> <script src="./axios.js"></script&g

vue 如何給圖片設定懶載入 用Vue實現圖片懶載入

懶載入:首先將圖片的src連結設為同一張圖,並將其真正的圖片地址儲存在img標籤的自定義屬性中。當js監聽到該圖片元素進入可視視窗時,即將自定義屬性中的地址儲存到src屬性中,達到懶載入的效果。 顧名思義,簡單理解就是 當頁面開啟,首先所有資料引進來的圖片先不顯示,所有圖先

vue使用element框架設定表格高度自適應

在定義表格高度時使用 :height="tableHeight" (element框架定義高度便會固定表頭,注意通過data()中獲取高度值的方法需要在height前面加上":" ) 在data()中設定tableHeight的值。 data() { return {

vueaxios請求payload的暴力解決方案

  去年公司做了一個小程式商城專案,運營了一段時間決定再次開發一個H5商城,用於微信好友之間的分享以及app內的巢狀,於是便開了一個vue專案,介面大多都是複用小程式的。  在做專案的過程中本人遇到一個由axios導致的問題——後臺介面拿不到請求的引數。因為介面都是之前寫好的

vue專案學習:9-vueaxios的使用

首先:npm install axios --save然後在home.vue中傳送ajax請求,因為在homevue中只需要傳送一次請求,就可以獲取到資料分發個各子元件。下面是轉發請求的介面值得注意的是,當你的配置檔案發生改變的時候,一定要重啟伺服器。才可以生效,這裡我掉了坑

vueaxios解決跨域問題和攔截器使用

vue中axios不支援vue.use()方式宣告使用。 所以有兩種方法可以解決這點: 第一種: 在main.js中引入axios,然後將其設定為vue原型鏈上的屬性,這樣在元件中就可以直接 this.axios使用了 import axios fro

vue單選框設定預設選中值

vue中單選框的預設選中不同於傳統方式設定checked,是通過在data中設定vulue來實現的 html部分是通過v-for取的後臺的資料 <li v-for="(value,i) in addList" :key="value.id"&

關於vueaxios的資料data格式問題

**# 注:網上很多都是使用post傳送的例子,但是我使用過程當中,就是引數有問題,一直報引數無法present的問題,後來看到這篇部落格,需要引入QS對引數進行轉換,且要設定Content-Type,這樣就可以了,特別注意QS的功能:****`第一個坑:使用axios的th

關於vueaxios攔截器的使用

Axios攔截器使用預期目標:解決請求任意介面之前進行統一攔截判斷,看是否返回500或404等錯誤並在頁面給出錯誤提示。一、剛開始看官方文件,如下: 備註:將程式碼加到頁面中發現並未起作用,百度谷歌搜尋一番,發現都是千篇一律,不同之處可能就是對返回狀態碼的處理不一樣,並未解決

vue實現基礎元件——拖拽元件

前言 pc端開發需要拖拽元件完成列表的順序交換,一般移動端的UI元件會包含,但是我在用的iview並沒有此功能的元件,於是手寫一個,實現起來很簡單。效果圖如下: 可以拖拽完成新排序,點選某一項可以觸發相關事件. 關於拖拽 drag & drop 拖放(

freemarkerConfiguration的路徑設定問題

今天使用freemarker中Configuration的setClassForTemplateLoading方法遇到了載入模板目錄的一個小問題。由於網上的其他論壇,部落格寫的有點亂,故記錄一下。Freemarker是一個模板框架,主要是為了加快染速度而產生的。它與web容器