vue axios 封裝及使用

2021-10-06 22:11:09 字數 1780 閱讀 3876

在vue專案中，和後台互動獲取資料這塊，我們通常使用的是axios庫，它是基於promise的http庫，可執行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦xsrf等。

1、首先建立 vue 專案，安裝 axios

vue create demo

cd demo

npm i axios vue-axios -s

一般我會在專案的src目錄中，新建乙個 network 資料夾，然後在裡面新建乙個 manager.js、 request.js、requestmethods.js、api.js。

manager.js 檔案用來封裝我們的axios，request.js 檔案用來定義的元件內呼叫的方法，requestmethods.js用來匯出配置好的axios例項，api.js用來統一管理我們的介面。

2、manager.js

import axios from


"axios"


import


from


'element-ui'


// 呼叫axios.create方法，配置一些屬性，返回乙個新的axios


const request= axios.


create()


// 請求攔截


request.interceptors.request.


use(


//config 代表是你請求的一些資訊


config =>


,    error =>


)return promise.


reject


(error)})


//  response*** 響應*** 請求之後的操作


request.interceptors.response.


use(


config =>


,    error =>


)export


default request;
3、requestmethods.js
// 匯出請求方式


export


const


get=


"get"


export


const


post


="post"


export


const


pot=


"pot"


export


const


delete


="delete"
4、api.js
// 


const path =


export


default path
5、request.js
import fetch from


"./manager"


import path from


"./api"


import


from


"./requestmethods"


export


function


getshoplist


(params)


)}
6、在vue元件中使用
// script 標籤內


import


from


"../network/request"


;export


default).


catch


(err =>);


}};

vue axios封裝以及使用

api.js裡面存放封裝的axios 如下 在vue頁面的script標籤中引入 import from ajax api tget,tpost,tformpost,tput,tdel 需要什麼方式引入什麼方式,例如 import from ajax api 可以直接這麼引入乙個 寫頁面的畫就不用寫...

vue axios 請求封裝

import axios from axios import router from router index import from element ui import from utils loading import from utils auth import qs from qs 引入qs...

封裝vue axios請求

util.js import axios from axios import qs from qs import from vant h5用的這個 const apiurl xx 訪問介面位址 設定超時時間 請求頭等 axios.defaults.timeout 30000 axios.defaul...