uniapp에서 요청 json 데이터를 얻는 방법

Uniapp은 크로스 플랫폼 애플리케이션 개발을 위한 도구로, 미니 프로그램, H5, APP 등 여러 플랫폼의 동시 개발을 지원합니다. 네트워크 요청을 할 때 일반적으로 요청에 의해 반환된 JSON 데이터를 얻어야 합니다. 이 기사에서는 Uniapp이 요청된 JSON 데이터를 얻는 방법을 소개합니다.

1. 네트워크 요청 보내기

우선, uni.request 메소드를 사용하여 요청을 보내는 등 Uniapp에서 네트워크 요청을 보내는 방법은 여러 가지가 있습니다. 예는 다음과 같습니다.

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    console.log(res);
  },
  fail: function(err) {
    console.log(err);
  }
})

위 예에서는 'https://api.example.com/user'로 POST 요청을 보냈으며 요청된 데이터는 사용자 이름과 비밀번호 필드가 포함된 개체입니다. 전송이 성공한 후 서버가 JSON 데이터를 반환하면 성공 콜백 함수에서 JSON 데이터를 얻을 수 있습니다.

2. JSON 데이터 구문 분석

일반적으로, res.data를 직접 사용하여 JSON 데이터를 얻을 수 있습니다. 그러나 서버가 잘못된 JSON 데이터를 반환하거나 JSON 형식이 아닌 데이터를 반환하는 경우 이 방법은 실패합니다. 따라서 JSON 데이터를 얻은 후에는 이를 구문 분석하여 합법적인지 여부를 판단해야 합니다.

Uniapp은 JSON 문자열을 JavaScript 객체로 구문 분석할 수 있는 JSON.parse() 메서드를 제공합니다. 성공 콜백 함수에서 이 메서드를 사용하여 JSON 데이터를 구문 분석할 수 있습니다. 예는 다음과 같습니다.

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    try {
      var data = JSON.parse(res.data);
      console.log(data);
    } catch (e) {
      console.log('返回的不是合法的JSON数据');
    }
  },
  fail: function(err) {
    console.log(err);
  }
})

위 예에서는 JSON.parse() 메서드를 사용하여 res.data를 구문 분석하고 구문 분석된 데이터를 콘솔에 출력합니다.

3. JSON 필드 가져오기

다음과 같이 구문 분석된 JavaScript 개체를 통해 JSON 데이터의 필드를 가져올 수 있습니다.

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    try {
      var data = JSON.parse(res.data);
      console.log(data.username);
      console.log(data.password);
    } catch (e) {
      console.log('返回的不是合法的JSON数据');
    }
  },
  fail: function(err) {
    console.log(err);
  }
})

위 예에서는 JSON 데이터의 사용자 이름 및 비밀번호 필드를 가져와서 다음으로 출력합니다. 콘솔.

4. 비동기/대기 사용

위의 세 단계는 성공 콜백 함수에서 수행됩니다. 이러한 작업이 여러 요청에 포함되면 코드가 상대적으로 길어집니다. 따라서 async/await를 사용하여 코드를 단순화할 수 있습니다. 예는 다음과 같습니다.

async function getUser() {
  try {
    const res = await uni.request({
      url: 'https://api.example.com/user',
      method: 'GET'
    });
    const data = JSON.parse(res.data);
    console.log(data);
  } catch (e) {
    console.log(e);
  }
}
getUser();

위 예에서는 비동기 함수 getUser()를 정의하고 JSON 데이터를 얻기 위해 uni.request() 요청이 완료될 때까지 기다리는 키워드를 사용했습니다. JSON 데이터 검색에 실패하면 예외가 발생합니다. async/await를 사용하면 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.

요약

이 기사에서는 네트워크 요청 전송, JSON 데이터 구문 분석, JSON 필드 가져오기 및 async/await 사용을 포함하여 Uniapp이 요청 JSON 데이터를 얻는 방법을 소개합니다. Uniapp 애플리케이션을 개발할 때 다음 팁을 사용하여 코드를 더욱 우아하고 간결하게 만드세요.

위 내용은 uniapp에서 요청 json 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!