前端封裝api請求

前端封裝 API 請求可以提高代碼的可維護性和重用性，同時使得 API 調用更加簡潔和易用。

下面是一種常見的前端封裝 API 請求的方式：

1. 創建一個 API 封裝模塊或類：可以使用 JavaScript 或 TypeScript 創建一個獨立的模塊或類來封裝 API 請求。這個模塊或類可以包含一些常用的方法，例如?get、post?等，用于發送不同類型的請求。

2. 配置基本信息：在封裝模塊中，設置 API 的基本信息，例如 API 的根地址、請求頭等。可以定義一些默認配置，也可以允許開發者在調用時傳入自定義配置。

3. 實現請求方法：根據需要，實現不同的請求方法，例如?get、post、put、delete?等。這些方法通常接收參數（例如 URL、數據、請求頭等），并返回一個 Promise 對象，以便在異步請求完成后獲取數據或處理錯誤。

4. ?處理請求和響應攔截：在請求發送前，可以對請求進行一些預處理，例如添加統一的請求頭、身份驗證等。在響應返回后，也可以對響應進行攔截和處理，例如判斷狀態碼、處理錯誤信息等。

5. ?錯誤處理：在封裝的 API 模塊中，可以統一處理請求錯誤。例如，對于網絡錯誤或服務器返回的錯誤信息，可以進行統一的處理，并根據需要進行提示或記錄操作。

6. ?使用封裝的 API 模塊：在項目中使用封裝的 API 模塊進行 API 請求。通過調用封裝模塊中的方法，傳入請求所需的參數，即可發送請求并獲取響應數據。

這種方式的好處是，在項目中可以復用封裝好的 API 請求邏輯，減少代碼的冗余，并且使得 API 調用的代碼更加清晰和易讀。

此外，對于底層的網絡請求庫，也可以根據需要進行切換和替換，而不需要修改大量的業務代碼。

uni-app 封裝api請求

在uni-app中封裝API請求可以按照以下步驟進行：

• 創建一個utils文件夾，并在其中創建一個api.js文件，用于存放API請求相關的代碼。

• 在api.js文件中，引入uni.request方法用于發送請求。示例代碼如下：

export?function?request(url,?method,?data)?{return?new?Promise((resolve,?reject)?=>?{uni.request({url:?url,method:?method,data:?data,success:?(res)?=>?{resolve(res.data);},fail:?(err)?=>?{reject(err);}});});
}

這里使用了Promise對象來處理異步請求，方便后續的使用和處理。

• 在api.js文件中，定義具體的API請求函數。

示例代碼如下：

import?{?request?}?from?'./utils/api';export?function?login(username,?password)?{const?url?=?'https://api.example.com/login';const?method?=?'POST';const?data?=?{username:?username,password:?password};return?request(url,?method,?data);
}export?function?getUserInfo(userId)?{const?url?=?`https://api.example.com/users/${userId}`;const?method?=?'GET';return?request(url,?method);
}

以上示例代碼中包括了登錄和獲取用戶信息兩個API請求函數。根據具體的需求，你可以進行修改或添加其他的API請求函數。

• 在需要使用API的頁面或組件中引入并調用定義的API請求函數即可。

示例代碼如下：

import?{?login,?getUserInfo?}?from?'./utils/api';login('example',?'password').then((res)?=>?{console.log('登錄成功',?res);
}).catch((err)?=>?{console.error('登錄失敗',?err);
});getUserInfo(123).then((res)?=>?{console.log('獲取用戶信息成功',?res);
}).catch((err)?=>?{console.error('獲取用戶信息失敗',?err);
});

以上示例代碼展示了如何使用封裝的API請求函數來進行登錄和獲取用戶信息的操作。根據具體需求，你可以在相應的頁面或組件中調用相關API請求函數。

通過以上步驟，你就可以在uni-app中封裝API請求，使代碼結構更加清晰和可維護。記得根據實際情況進行適當的錯誤處理和數據處理。

uni-app封裝api請求改進

//?@/utils/request.js
//?#ifdef?MP-WEIXIN
const?baseURL?=?"https://www.bradenhan.tech"
//?#endif?
//?#ifdef?H5
const?baseURL?=?""
//?#endifconst?timeout?=?5000//?封裝api請求
const?request?=?function(option){?//?獲取用戶傳入的urlvar?url?=?baseURL?+?option.url;?//?添加提請求頭var??header?=?option.header||{}if(!!option.needToken){//?添加token?header.Authorization?=??'Bearer?'?+??uni.getStorageSync('token');??}header.source=1;header.channel="h5";//?加載提示var?loading?=?option.loading;//?如果有loading就顯示loadingif(loading){uni.showLoading(loading)}//?返回一個promisereturn?new?Promise((resolve,reject)=>{??//?發起一個request請求uni.request({url,?//請求urlmethod:option.method||"GET",?//請求方法header,?//請求頭timeout,data:option.data||option.params,?//請求數據success(res){//?成功返回結果if(res.statusCode===200){resolve(res.data)//?如果是101?沒有權限if(res.data.code==101){uni.showToast({title:?res.data.msg,icon:'none'})uni.redirectTo({url:?'/pages/login/index',})}if(res.data.code!=200&&res.data.code!=0){uni.showToast({icon:'none',title:res.data.msg||'請求錯誤'})}}?},fail(err){//?失敗返回失敗結果uni.showToast({title:?'請求失敗',icon:'error'})console.error(err);reject(err)},complete(){//?完成?關閉loadingif(loading){uni.hideLoading()}}})})
}//?定義get簡潔方法
request.get=function(url,config){return??request({url,method:"GET",...config})
}//?定義post簡潔方法
request.post=function(url,data,config){return??request({url,method:"POST",??...config,data})
}
//?導出請求
export?default?request;

統一控制api.js

request.post(url,data,needToken)

參數：

• url 請求url

• data 請求參數data

• needToken 是否需要參數

//?@/api/index.jsimport?request?from?'@/utils/request.js'?//?用戶注冊
export?function?customUseRegister(data){return?request.post("/xxxx1",data)
}//?微信用戶登錄
export?function?customUserLogin(data){return?request.post("/xxxx2",data)
}?//?更新用戶信息?--?需要使用Token
export?function?customUserUpdate(data){return?request.post("/xxxx3",data,{needToken:?true})
}

組件中使用

import?{?customUserLogin,?customUseRegister,customUserUpdate?}?from?'@/api/index.js'customUserUpdate(data).then((res)?=>?{console.log('成功',?res);??
}).catch((err)?=>?{?console.error('登錄失敗',?err);
});

?