新建http.js
1、引入axios
? ??import axios from "axios";
2、設置axios默認url（需不需要設置需要根據(jù)項目來確定）
axios.defaults.baseURL = "默認url";
3、設置包裝請求參數(shù)（request攔截器）
axios.interceptors.request.use(?
? ??????config => {
? ??????????????let requestData = config.data;
? ??????????????config.data = JSON.stringify(requestData);
? ? ? ? ? ? ? ? setHeader(config);
? ??????????????return config;
? ? ? ? },
? ??????err => {
? ??????????????return Promise.reject(err);
? ? ? ? }
};
4、設置header、token信息（統(tǒng)一設置）
function setHeader(config) {
? ??????config.headers["Content-Type"] = "application/json";
}
在setHeader中可以做很多處理，比如有登錄頁面的話，是不需要加token、在初次打開頁面時也是獲取不到存儲的token
在這里面就需要做相應的校驗
function setHeader(config) {?
? ??????let now_href = window.location.href;
? ??????let userTockenType = getLocalUserInfo("userTockenType");
? ? ? ? let userTockenName = getLocalUserInfo("userTockenName");
? ? ? ? if(now_href.indexOf('Login') == -1 && userTockenType && userTockenName){
? ??????????????// 檢驗當前頁面不是登錄頁面 && 有token類型 && 有token名
? ??????????????config.headers["Authorization"] = userTockenType + " " + userTockenName; // 檢驗通過設置token
? ? ? ? }
? ? ? ? // 下面也可以設置一些公共Header? ? ? ??
? ? ? ??config.headers["Content-Type"] = "application/json";
? ??????config.headers["Access-Control-Allow-Origin"] = "*";
}
這里的setHeader函數(shù)在（3）中調(diào)用
5、設置http response 攔截器
axios.interceptors.response.use(?
? ??????config => {
? ??????????????return config
? ? ? ? },
? ??????error => {
? ??????????????return Promise.reject(res.data)
? ? ? ? }
)
6、封裝一些方法（方便調(diào)用）
fetch 請求方法：
export function fetch(url, params = {}) {
? ??????return new Promise((resolve, reject) => {
? ??????????????axios
? ??????????????????????.get(url, {
? ??????????????????????????????params: params
? ? ? ? ? ? ? ? ? ? ? ? })
? ??????????????????????.then(response => {
? ??????????????????????????????resolve(response.data); })
? ? ? ? ? ? ? ? ? ? ? ? })
? ??????????????????????.catch(err => {
? ??????????????????????????????reject(err);
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? })
}
delete 請求方法:
export function delet(url, params = {}) {
? ??????return new Promise((resolve, reject) => {
? ??????????????axios
? ??????????????????????.delete(url, {
? ??????????????????????????????params: params
? ? ? ? ? ? ? ? ? ? ? ? })
? ??????????????????????.then(response => {
? ??????????????????????????????resolve(response.data);
? ? ? ? ? ? ? ? ? ? ? ?})
? ??????????????????????.catch(err => {
? ??????????????????????????????reject(err);
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? })
}
put 方法封裝:
export function put(url, data = {}) {
? ??????return new Promise((resolve, reject) => {
? ??????????????axios.put(url, data).then(
? ??????????????????????response => {
? ??????????????????????????????resolve(response.data);
? ? ? ? ? ? ? ? ? ? ? ? },
? ??????????????????????err => {
? ??????????????????????????????reject(err);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? )
? ? ? ? })
}
這些方法只是舉例，其他方法封裝同理
