api的介面封裝

2021-10-24 12:46:01 字數 1581 閱讀 6372

在src下建立network資料夾。network資料夾下建立api.js和http.js。

http.js主要用來統一管理專案http資料夾下api請求,主要用來方便管理介面。

在vue專案中,和後台互動獲取資料這塊,我們通常使用的是axios庫,它是基於promise的http庫,可執行在瀏覽器端和node.js中。他有很多優秀的特性,例如攔截請求和響應、取消請求、轉換json、客戶端防禦xsrf等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護,直接推薦我們使用axios庫。

主要有以下步驟:

1.安裝axios

npm install axios; // 安裝axios
2.在http.js中引入axios

import axios from 'axios';
3.環境的切換

我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseurl可以設定axios的預設請求位址就不多說了。

在http.js中:

其中4 .通過axios.defaults.timeout設定預設的請求超時時間。例如超過了10s,就會告知使用者當前請求超時,請重新整理等。

axios.defaults.timeout=5000;
5.、請求攔截

我們在傳送請求前可以進行乙個請求的攔截,為什麼要攔截呢,我們攔截請求是用來做什麼的呢?比如,有些請求是需要使用者登入之後才能訪問的,或者post請求的時候,我們需要序列化我們提交的資料。這時候,我們可以在請求被傳送之前進行乙個攔截,從而進行我們想要的操作。

// 請求***

這裡說一下token,一般是在登入完成之後,將使用者的token通過localstorage或者cookie存在本地,然後使用者每次在進入頁面的時候(即在main.js中),會首先從本地儲存中讀取token,如果token存在說明使用者已經登陸過,則更新vuex中的token狀態。然後,在每次請求介面的時候,都會在請求的header中攜帶token,後台人員就可以根據你攜帶的token來判斷你的登入是否過期,如果沒有攜帶,則說明沒有登入過。這時候或許有些小夥伴會有疑問了,就是每個請求都攜帶token,那麼要是乙個頁面不需要使用者登入就可以訪問的怎麼辦呢?其實,你前端的請求可以攜帶token,但是後台可以選擇不接收啊!

6、響應的攔截

// 響應***

// axios.interceptors.response.use(

// response => ,

// error =>

// }

// )

7、在頁面中引入對應的函式

import  from "./../../api/api";
通過async await 語句呼叫對應的函式

封裝API介面

封裝api介面 目的 為了以後修改介面方便,如果專案很大,在每乙個頁面裡修改介面的話,很麻煩,所以封裝在乙個檔案裡,找起來也很方便 如何封裝 1.在src下建乙個restful資料夾,在此下面建乙個api.js檔案 2.因為上面的介面位址寫的是 api 所以要在config資料夾下的index.js...

api介面封裝

作用 為了以後修改介面方便,如果專案很大,在每乙個頁面裡修改介面的話,很麻煩,所以封裝在乙個檔案裡,找起來也很方便 http.js 中 import axios from axios 環境的切換 環境指的是就是開發環境 和 生產環境 npm run build之後 開發環境 development ...

python 封裝API介面

1.對一天中通話,按時段進行分析 輸入資料為.txt檔案,資料部分展示如下 u110107 02169228380 530005 20190228125930 61aa.u110107 18895672550 530005 20190228165337 ffffe06f.u110107 188956...