Uniapp은 네트워크 요청 캡슐화 방법을 구현합니다. 먼저 초기 요청을 구현한 다음 새 [request.js] 파일을 생성하고 코드는 [return new Promise((resolved, Rejected) => {uni.request..]; 드디어 최적화입니다.
이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
권장(무료): uni-app 개발 tutorial
Uniapp은 네트워크 요청 캡슐화 방법을 구현합니다:
1. uniapp의 초기 요청 사용법은 다음과 같습니다.
uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); }.fail = (err) => { console.log(err); } });
2. 먼저 Promise를 통해 간단한 캡슐화를 수행하고 새로운 요청을 생성합니다. js 파일:
//options参数我们后面会说 function service(options = {}) { return new Promise((resolved, rejected) => { uni.request({ url: options.url, //仅为示例,并非真实接口地址。 data: options.data, header: { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //权限token }, success: (res) => { rejected(res.data); }.fail = (err) => { rejected(err) } }); } } export default service;
3, 마지막으로 이전 단계를 기반으로 다시 최적화합니다.
//把配置项单独处理 import store from '/store/index.js'; //vuex let server_url=' ';//请求地址 let token = ' '; 凭证 process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置 function service(options = {}) { store.state.token && (token = store.state.token); //从vuex中获取登录凭证 options.url = `${server_url}${options.url}`; //配置请求头 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) { //请求成功 resolved(res.data.data); } else { uni.showToast({ icon: 'none', duration: 3000, title: `${res.data.msg}` }); rejected(res.data.msg);//错误 } } //错误 options.fail = (err) => { rejected(err); //错误 } uni.request(options); }); } export default service;
4 이제 페이지에서 사용합니다.
1.
┌─common
│ ├─ request.js //Request┌─pages│ ├─index│ │ └─api.js //api list│ │ └─index.vue / /페이지 파일 ├─static ├─store│ ├─index.js //vuex├─main.js├─App.vue├─manifest.json└─pages .json3. 페이지에서2. api list 구성 .api.js //api list
import request from '/common/request.js' export function login(data) { return request({ url: '/user/login', method: 'POST', data }) }로그인 후 복사
import { login} from './api.js'; //引入需要的api //发起请求 onLoad() { login('parameter').then(data => { console.log(data); }); }...
위 내용은 uniapp이 네트워크 요청 캡슐화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!