axios在vue中的使用

2021-08-30 17:40:21 字數 1823 閱讀 4874

axios的安裝與配置:

使用 npm:

$ npm install axios
使用script匯入

在vue-cli中使用

import axios from 'axios'
在原型上定義方法,就可以在元件的methods中寫this.$http({}),這個$http名字可以自己自定義,但注意不要重複衝突

vue.prototype.$http=axios
以下請求都以建立在 vue.prototype.$http=axios 的基礎上

.then( (res)=> )

相當於.then(function(respone) )

get請求

發起乙個user請求,引數為給定的id

.catch((error) => );上面的請求也可選擇下面的方式來寫

.catch((error) => );post 請求

this.$http.post('/user',)

.then((res)=> )

.catch((error) => );

如果覺得傳的資料很多,可以封成物件,賦值給變數

.catch((error) => );傳送多個不同的請求

發起乙個多重併發請求

);可以通過將相關配置傳遞給 axios 來進行請求。

axios(config)

// 傳送乙個 post 請求

// 傳送乙個 get 請求 (get請求是預設請求模式)

this.$http('/user/12345');

本地測試配置,利用node的express

webpack.dev.conf.js的配置

const portfinder = require('portfinder')

//在此後新增下面這段**

const express = require('express') //(express是基於 node.js 平台,快速、開放、極簡的 web 開發框架)

const apiroutes = express.router()//建立乙個路由

//然後找到devseerver,在裡面新增

res.json()

//然後就可以在元件created或methods中使用

created () )

}

vue中axios的使用

寫上乙個專案的時候,我們就用到了axios,但是我當時沒怎麼學,不知道從哪下手,這個時候我小夥伴又把咋用的給我整理好了,那我就老老實實的當個廢物,他怎麼說我怎麼用。最後能用,但是不理解為什麼這樣用,正好學vue中的axios時又重新學了一遍。直接拿 來講吧 axios.defaults.baseur...

vue中axios的使用

新開了乙個vue專案,從頭到尾都是乙個人做的,所以就自己配置了乙個axios.js檔案 import axios from axios 引入axios vue.prototype.http axios 掛載在原型上 原因 直接掛載在原型上可能會給vue的原型鏈產生汙染,且太粗暴 不符合vue的生態環...

在vue中axios的問題

發現在vue中使用axios有乙個執行多個併發請求,之前就不知道怎麼處理現在有點心得 function getuseraccount function getuserpermissions axios.all getuseraccount getuserpermissions then axios....