uniapp이 네트워크 요청 캡슐화를 구현하는 방법

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 .json

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
  })
}

3. 페이지에서

import { login} from './api.js';  //引入需要的api
//发起请求
onLoad() {
login('parameter').then(data => {
   console.log(data);
});
}...

를 사용하세요.

위 내용은 uniapp이 네트워크 요청 캡슐화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!