vue介面封裝

2021-10-24 07:30:50 字數 1973 閱讀 6029

總結

因為從開發到最終上線的過程中,api是需要經常更換的,為了我們更好的統一管理,所以需要將api封裝起來。

在主目錄下建立utils資料夾,並在其中新建request.js檔案用於封裝請求。

**如下(示例):

import axios from 'axios'

import from 'element-ui'

import errorcode from '@/utils/errorcode'

axios.defaults.headers[

'content-type']=

// 建立axios例項

const service = axios.

create()

// request***,用於加token

service.interceptors.request.

use(config =

>

return config

}, error =

>

)// 響應***

service.interceptors.response.

use(res =

>).

then((

)=>)}

else

if(code ==

=500

|| status ==

=500))

}else)}

return promise.

reject

(new error

(msg))}

else

if(code !=

=200))

})}else)}

return promise.

reject

('error')}

else},

error =

>

= error;

if(message ==

"network error"

)else

if(message.

includes

("timeout"))

else

if(message.

includes

("request failed with status code"))

message()

return promise.

reject

(error)})

export default service

request檔案中引用的errorcode :

export default

在主目錄下建立api資料夾,根據需要新建login.js介面檔案。

login.js**如下:

import request from '@/utils/request'

// 登入方法

export function login

(data))}

// 獲取使用者詳細資訊

export function getinfo()

)}

/api是proxytable中配置的伺服器的介面位址,詳見vue解決跨域問題。

login.vue**如下:

import  from "@/api/login"

;// 登入方法

onsubmit()

;login

(params)

.then

((response)

=>);

}else})

;}

/api是proxytable中配置的伺服器的介面位址,詳見vue解決跨域問題。

總結:以上就是今天要分享的內容,本文介紹了在vue中如何封裝呼叫介面,而vue還有很多其他模組需要封裝統一,需要我們大家共同分享。

vue封裝介面

需要建立倆個js檔案 http.js 和 api.js 在http.js中引入axios,對get和post進行封裝請求方式,在這裡可以設定請求頭和超時時間,也可以進行環境的切換,這裡的環境指的是開發環境和生產環境,也可以設定請求攔截和響應攔截 在http.js中 第一步 引入axios impor...

vue封裝資料介面

1.安裝axios npm install axios 2.在src目錄下新建乙個http資料夾 3.在http下新建兩個檔案 api.js 用來統一資料請求介面 request.js 封裝資料請求方法 request.js檔案 基本不用封裝,只是對請求的介面位址,超時,報錯處理 import ax...

vue封裝api介面

在沒有封裝api之前,我們是類似這樣使用 axios 的 this.axios.post blogarticle frontlist parms then resp 封裝之後這樣呼叫 userlist parms then resp 我們先不看具體是怎麼封裝的,但看使用,發現好像寫的 一樣多呢。等你...