유 니 앱 데이터 패키지 및 api 인터페이스 관리 요청

2885 단어 uni-app
유 니 앱 데이터 패키지 및 api 인터페이스 관리 요청
1. 개발 환경 유 니 앱 2. 컴퓨터 시스템 windows 10 전문 판 3. 유 니 앱 을 사용 하여 개발 하 는 과정 에서 우 리 는 데이터 요청 을 자주 사용 합 니 다. 다음은 제 가 유 니 앱 데이터 요청 에 대한 패 키 징 과 인터페이스 관리 가 도움 이 되 기 를 바 랍 니 다!4. pages 동급 에 디 렉 터 리 를 새로 만 들 고 http (이름 자체 정의), http 디 렉 터 리 에 http. js 파일 을 새로 만 들 고 코드 를 다음 과 같이 추가 합 니 다.
function req(obj) {
    return new Promise((resolve, reject) => {
        // const HOST = baseUrl;
        var method = obj.method || "GET";
        // var url = HOST + obj.url || "";
        var url =  obj.url || "";
        var data = obj.data || {};
        var header = obj.header || obj.method == ('post' || 'POST') ? {
            'Content-Type': obj.contentType || 'application/x-www-form-urlencoded',
        } : {
            'Content-Type': obj.contentType || 'application/json',
        };
        var success = obj.success; //       
        var fail = obj.fail; //     ,        
        uni.request({
            url: url,
            data: data,
            method: method,
            header: header,
            success: ((res) => {
                if (res.statusCode === 203) {
                    console.log('  203   ')
                    //     ,     
                    // uni.reLaunch({url:'/pages/login/index'})
                } else if (res.statusCode === 200) {
                    resolve(res)
                }
            }),
            fail: ((err) => {
                reject(err)
            })
        })
    })
}
export default req

5. http 디 렉 터 리 동급 에 api 디 렉 터 리 를 추가 하고 api 디 렉 터 리 아래 에 api. js 를 새로 만 들 고 다음 코드 를 추가 합 니 다.
import req from '../http/http.js' //        

let api = {};

//    
api.getfeng = data => {  //getfeng      ,data    
    return req({
        url: '/api/feng', //    
        method: 'post',  //    
        data: data      //  
    })
};

export default api  //  

6. vue 템 플 릿 에 다음 코드 를 추가 합 니 다.
import api from '../../api/api.js'  //    

7. methods 에 다음 코드 를 추가 합 니 다.
chengeth5(){
api.getfeng({name:' ',age:'100'}).then((res)=>{
                    console.log(res);  //    
                })
            },

7 - 1. mounted 에 다음 코드 를 추가 합 니 다.
this.chenget();

8. 프로젝트 구 조 는 다음 과 같 습 니 다. uni-app数据请求封装和api接口管理_第1张图片 10. 이번 호 공 유 는 여기 서 끝 났 습 니 다. 좋 지 않 습 니까? 도움 이 되 었 으 면 좋 겠 습 니 다. 우리 함께 정상에 오 르 도록 노력 합 시다!

좋은 웹페이지 즐겨찾기