在項目下新建一個service文件夾（與package.json同級），
子文件：http.js 對axios請求頭、攔截器等，
reset.js：請求方法的封裝，get，post等。
1. config.js
```
//?import?{?Message,?MessageBox?}?from?"element-ui";
export?const RESPONSR_CODE?=?{
/*?50008:?'非法的token',
50012:?'其他客戶端登錄了',
50014:?'Token?過期了'?*/
2:?res=>?{
????????return res.result.msg;
????},
3:?res=>?{
????????return res.result.msg;
????}
};
export?const ERROR_MESSAGE?=?{
400:?"服務器連接失敗",
401:?"服務器連接失敗",
403:?"服務器連接失敗",
404:?"請求出錯(404)",
408:?"服務器連接失敗",
500:?"服務器連接失敗",
501:?"服務器連接失敗",
502:?"服務器連接失敗",
503:?"服務器連接失敗",
504:?"網關超時(504)",
505:?"服務器連接失敗"
};
export function MessageTip(message,cb)?{
/*
Message.closeAll();
Message({
message:message,
type:?"error",
duration:?3?*?1000
????});
*/
alert(message);
cb?&&?cb();
}
export?const CONFIG_FORMAT?=?{
encode:?config=>?{
????????leturl?=config.url;
url?+=?"?";
????????let keys?=Object.keys(config.params);
for?(let key?of keys)?{
url?+=?`${key}=${encodeURIComponent(config.params[key])}&`;
????????}
url?=url.substring(0,url.length?-?1);
config.params?=?{};
config.url?=url;
????????return config;
????},
token:?config=>?{
????????if?(window.localStorage.getItem("token"))?{
????????????let token?=?JSON.parse(window.localStorage.getItem("token")).token;
????????????if?(token.length?>?0)?{
config.headers["token"]?=token;
????????????}
????????????return config;
????????}?else?{
MessageTip("請先登錄",?()?=>?{
????????????????return Promise.reject("請先登錄");
????????????});
????????}
????},
upload:?config=>?{
config.tomeout?=?600000;
????????return config;
????},
path:?config=>?{
config.baseURL?=?"";
????????return config;
????}
};
```
2. http.js
```
//axios請求頭、攔截器等
import?axios?from"axios";
import?{
????RESPONSR_CODE,
????ERROR_MESSAGE,
????MessageTip,
????CONFIG_FORMAT
}?from"./config";
//?創建axios實例
const service?=axios.create({
baseURL:?"/api",
timeout:?5000
});
service.defaults.headers.post["Content-Type"]?=?"application/json";
//?request攔截器
service.interceptors.request.use(
config=>?{
config.headers["x-access-gwpcm-token"]?=config["token"];
????????if?(config.type?&&config.type?===?"encode")?{
config?=?CONFIG_FORMAT.encode(config);
????????}
????????return config;
????},
error=>?{
Promise.reject(error);
????}
);
//?response?攔截器
service.interceptors.response.use(
response=>?{
????????constres?=response.data;
????????if?(+res.result.code?===?1)?{
????????????return res;
????????}?else?{
????????????letmessage?=RESPONSR_CODE[+res.result.code];
MessageTip(message(res),?()?=>?{
????????????????return Promise.reject("error");
????????????});
????????}
????},
error=>?{
????????letmessage?=?"";
????????if?(error.response)?{
????????????letmsg?=ERROR_MESSAGE[+error.response.status];
message?=msg?||?"服務器連接失敗";
????????}?else?if?(error.message.includes("timeout"))?{
message?=?"服務器訪問超時，請重試！";
????????}
MessageTip(message,?()?=>?{
????????????return Promise.reject(error);
????????});
????}
);
export?default service;
```
3. request.js
```
import?interfaces?from"./interface";
const Interface?=Object.assign({},interfaces);
export?default Interface;
```
4. reset.js
```
//請求方法的封裝，get，post等
import?http?from'./http.js'
export?default?{
post(url,data,config)?{
????????return http.post(url,data,config)
},
get(url,params,config)?{
????????const getConfig?=?{}
????????if?(params)?{
Object.assign(getConfig,?{
params
????????????})
???????}
????????if?(config)Object.assign(getConfig,config)
????????return http.get(url,getConfig)
????},
put(url,data,config)?{
????????return http.put(url,data,config)
????},
delete(url,params,config)?{
????????const delConfig?=?{}
????????if?(params)?{
Object.assign(delConfig,?{
params
????????????})
????????}
????????if?(config)Object.assign(delConfig,config)
????????return http.delete(url,delConfig)
????},
patch(url,params,config)?{
????????return http.patch(url,params,config)
????}
}
```
5. 創建interface文件夾
6. 在interface文件夾下創建index.js
```
/\*\*
?\*?The?file?enables?`@/interface/index.js`?to?import?all?axios?modules
?\*?in?a?one-shot?manner.?There?should?not?be?any?reason?to?edit?this?file.
?\*/
const files?=require.context(".",?false,?/\.js$/);
let modules?=?{};
files.keys().forEach(key=>?{
????if?(key?===?"./index.js")?return;
modules?=?{...modules,?...files(key)?};
});
export?default modules;
```
7. 在interface文件夾下創建接口文件
示例：
login.js文件
```
//api封裝使用
import?request?from"../reset";?//?axios的封裝?后續添加axios二次封裝
//?獲取專題列表數據
export function Login(query = {},config = {})?{
????return?request.post(`/login`, query, config);
}
```
8. 在main.js中引入接口文件
```
// 引入request文件
import Request form "@/.../request";
Vue.prototype.$request = Request;
```
9. 在項目中使用
```
this.$request.Login({loginName:'aaa',password:'bbb'})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})
```
