一底靠、uniapp初始請(qǐng)求使用方式如下：
uni.request({
url: 'https://www.example.com/request', //僅為示例囚灼，并非真實(shí)接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定義請(qǐng)求頭信息
},
success: (res) => {
console.log(res.data);
},
fail:(err) => {
console.log(err);
}
});
二黑毅、我們先通過(guò)Promise進(jìn)行一次簡(jiǎn)單封裝,新建request.js文件：
//options參數(shù)我們后面會(huì)說(shuō)
function service(options = {}) {
return new Promise((resolved, rejected) => {
uni.request({
url: options.url, //僅為示例嚼摩，并非真實(shí)接口地址。
data: options.data,
header: {
'content-type': 'application/x-www-form-urlencoded',
'accessToken': `${token}` //權(quán)限token
},
success: (res) => {
resolved(res.data);
},
fail:(err) => {
rejected(err)
}
});
}
}
export default service;
三矿瘦、最后我們?cè)谏弦徊交A(chǔ)上再一次優(yōu)化枕面。
//把配置項(xiàng)單獨(dú)處理
import store from '/store/index.js'; //vuex
let server_url=' ';//請(qǐng)求地址
let token = ' '; 憑證
process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //環(huán)境配置
function service(options = {}) {
store.state.token && (token = store.state.token); //從vuex中獲取登錄憑證
options.url = `${server_url}${options.url}`;
//配置請(qǐng)求頭
options.header = {
'content-type': 'application/x-www-form-urlencoded',
'accessToken': `${token}` //Bearer
};
return new Promise((resolved, rejected) => {
//成功
options.success = (res) => {
if (Number(res.data.code) == 0) { //請(qǐng)求成功
resolved(res.data.data);
} else {
uni.showToast({
icon: 'none',
duration: 3000,
title: `${res.data.msg}`
});
rejected(res.data.msg);//錯(cuò)誤
}
}
//錯(cuò)誤
options.fail = (err) => {
rejected(err); //錯(cuò)誤
}
uni.request(options);
});
}
export default service;
四、現(xiàn)在我們?cè)陧?yè)面中使用缚去。
1潮秘、新建pages頁(yè)面。
目錄如下
┌─common
│ ├─request.js //請(qǐng)求
┌─pages
│ ├─index
│ │ └─api.js //api列表
│ │ └─index.vue //頁(yè)面文件
├─static
├─store
│ ├─index.js //vuex
├─main.js
├─App.vue
├─manifest.json
└─pages.json
2易结、配置api列表枕荞。api.js //api列表
import request from '/common/request.js'
export function login(data) {
return request({
url: '/user/login',
method: 'POST',
data
})
}
3、頁(yè)面中使用
import { login} from './api.js'; //引入需要的api
//發(fā)起請(qǐng)求
onLoad() {
login('parameter').then(data => {
console.log(data);
});
}...
ps:uniapp插件市場(chǎng)下載鏈接https://ext.dcloud.net.cn/plugin?id=2355
