基于Promise封裝uni-app的request方法,實作類似axios形式的請求
基于Promise封裝uni-app的request方法,h5和小程式均可使用
特别之處
- 支援Promise API
- 攔截請求和響應
- 轉換請求和響應資料
- 取消請求
- 自動轉換為JSON資料
- 逾時請求
- 告别callback
- 支援預設請求字首
- 支援并發請求
特别之處
uni-app
架構中
安裝
npm install uni-request --save
檔案中引用
import uniRequest from 'uni-request';
使用方法
請求方法的别名
uniRequest.request(config)
uniRequest.get(url[, config])
uniRequest.delete(url[, config])
uniRequest.head(url[, config])
uniRequest.options(url[, config])
uniRequest.post(url[, data[, config]])
uniRequest.put(url[, data[, config]])
uniRequest.patch(url[, data[, config]])
全局配置
uniRequest.defaults.baseURL = 'https://yourapi.domain.com';
uniRequest.defaults.headers.common['Authorization'] = AUTH_TOKEN;
uniRequest.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
全局攔截
// 請求攔截
uniRequest.interceptors.request.use(
request => {
//配置基本資訊
return request;
},
err => {
console.log('請求失敗');
return Promise.reject(err);
});
// 響應攔截
uniRequest.interceptors.response.use(function(response) {
console.log('傳回進入攔截成功')
return Promise.resolve(response);
}, function(error) {
console.log('傳回進入攔截失敗')
return Promise.reject(error);
});
發送Get請求
// 向具有給定ID的使用者送出請求
uniRequest.get('/user?id=12345')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 可選地,上面的請求也可以按照
uniRequest.get('/user', {
data: {
id: 'number'
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
// 想要使用 async/await? 将`async`關鍵字添加到外部函數/method
async function getUser() {
try {
const response = await uniRequest.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
發送Post請求
uniRequest.post('/user', {
firstname: 'firstname',
lastname: 'lastname'
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});