uniapp이 요청 요청을 캡슐화하는 방법

Uniapp은 요청 요청 방법을 캡슐화합니다. 먼저 프로젝트 아래에 공통 폴더를 만든 다음 [request.js] 파일을 열고 캡슐화된 코드 작성을 시작합니다. 약속을 통해 마지막으로 메서드를 내보냅니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, thinkpad t480 컴퓨터.

추천(무료): uni-app 개발 튜토리얼

Uniapp 캡슐화 요청 방법:

1 프로젝트 아래에 새 공통 폴더를 생성한 후 request.js 파일을 생성합니다

2. request.js 파일을 열고 캡슐화된 코드 작성을 시작하세요. 아이디어는 매우 간단합니다.

request.js 참조 코드는 다음과 같습니다

const baseUrl = 'https://unidemo.dcloud.net.cn'   
const request = (url = '', date = {}, type = 'GET', header = {
}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            method: type,
            url: baseUrl + url,
            data: date,
            header: header,
            dataType: 'json',         
        }).then((response) => {
            setTimeout(function() {
                uni.hideLoading();
            }, 200);
            let [error, res] = response;        
            resolve(res.data);
        }).catch(error => {
            let [err, res] = error;
            reject(err)
        })
    });
}
export default request

3. main.js에 글로벌 등록

• import request from 'common/request.js'
  Vue.prototype.$request = request

  로그인 후 복사

• 4. 페이지 호출

  this.$request('/api/news', {
  // 传参参数名：参数值,如果没有，就不需要传
  }).then(res => {
  // 打印调用成功回调
  console.log(res)
  })

  로그인 후 복사
  index.vue 호출

<template>
    <view>
        <uni-list v-for="(item,index) in productList" :key="index">
            <uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {
            uniList,
            uniListItem
        },
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                this.$request(&#39;/api/news&#39;, {
                    // 传参参数名：参数值,如果没有，就不需要传
                    // "username": "john",
                    // "key": this.searchValue
                }).then(res => {
                    // 打印调用成功回调
                    console.log(res)
                    this.productList = res;
                })
            },
        }
    }
</script>
<style>
</style>

로그인 후 복사

관련 무료 학습 권장사항:

프로그래밍 영상

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