vue專案中封裝axios請求

1.前言：之前是我負責這個專案的搭建，及打包上線，整個專案都是我乙個人來做，所以介面寫的遍地都是，造成了瀏覽起來很難受，不便於維護 ，所以就打算封裝一下axios 建立乙個apis 的js檔案來集中管理介面，走著！

首先考慮的是通過promise來封裝axios，使**看起來更清晰明了

2.1 專案中引入axios

使用npm安裝

$ npm install axios

3.promise封裝axios

專案新建乙個utils.js檔案

/***

** promise 二次封裝請求
*/import axios from
"axios"
;// 一些請求的基本配置
const service = axios.
create(}
);// 輸出方法
export
default
function
request
(url, data =
,method=
"post");
if(method.
tolowercase()
==="get"
)else
service
(options)
.then
(res =>).
catch
(error =>);
});}

import request from

"../utils/utils"
// 引入utils.js 

const api =

,// 登入
login
(data)
}

export

default api;

/**

** 引入封裝好的request
* api 介面庫
*/import request from
"../utils/utils"
;const api =
,// 登入
login
(data)};
export
default api;

let data =

//需要上傳的引數

//請求引數

api.
get_code
(data)
.then
(res =>);
}).catch
(err =>
);

嘿嘿結束！！！

vue專案中封裝axios

axios.defaults.timeout 100000 請求超時時間。請求位址 其實做到這裡也可以，不用去單獨封裝get post 等請求也可以直接呼叫的。然後就可以在vue頁面去呼叫了 mounted function then function response catch function...

vue專案中封裝axios

首先，配置axios 在專案src目錄下建立request.js import axios from axios import store from store import from ant design vue import from ant design vue import vue from...

專案中封裝的axios

把每個一級選單按照模組去區分在urls檔案中進行統一管理 把get 和post請求進行攔截，以此進行方便頁面傳參，get和post傳參方式一樣方便使用。main.ts中 import post from apis index vue.prototype.post post 掛載到全域性將 postr...