uniapp中的post請求詳解

一、uniapppost請求415

在進行uniapp的post請求時，有時候會遇到415的問題，這是由於後台接口支持的請求方式不正確，比如應該用post，結果使用了get，或者content-type設置不正確等。需要檢查後台的接口是否支持post請求，請求頭是否正確，以及發送的數據是否符合要求。

//示例代碼
uni.request({
    url: 'http://localhost:8080/api/list',
    method: 'POST',
    header: {
        'content-type': 'application/json',
        'Authorization': token,
    },
    data: {
        pageNum: 1,
        pageSize: 10
    },
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

二、uniapp接口請求

uniapp中可以使用uni.request()函數進行接口請求，該函數會返回一個Promise對象，可以在接口調用的success和fail回調函數里進行對接口返回結果的處理等操作。

//示例代碼
uni.request({
    url: 'http://localhost:8080/api/list',
    method: 'POST',
    header: {
        'content-type': 'application/json',
        'Authorization': token,
    },
    data: {
        pageNum: 1,
        pageSize: 10
    },
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

三、uniapppost請求放哪裡

在uniapp中發送post請求並不是只能在頁面中進行，也可以在公共的js文件中進行封裝，方便在多個頁面中復用，提高代碼的可維護性和重用性。

//util.js
import { baseURL } from '../config.js'

export function request(url, data, method='POST', header={}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json',
        ...header
      },
      success: res => {
        if (res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res.errMsg)
        }
      },
      fail: err => {
        reject(err.errMsg)
      }
    })
  })
}

//頁面中使用
import { request } from '../utils/util.js'

onLoad: function() {
  request('/api/list', { pageNum: 1, pageSize: 10 }, 'POST', { Authorization: token })
    .then(res => {
      console.log(res)
    })
    .catch(error => {
      console.log(error)
    })
}

四、uniapp請求數據

uniapp中發起post請求時，需要發送一些數據給後台，可以通過data參數傳遞需要發送的數據，傳遞方式可以是json格式、form-data格式等，具體格式需要根據後台接口的要求來確定。

//示例代碼
uni.request({
    url: 'http://localhost:8080/api/user',
    method: 'POST',
    header: {
        'content-type': 'application/json',
        'Authorization': token,
    },
    data: {
        name: 'tester',
        age: 20
    },
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

五、uniapp請求二次封裝

為了方便在多個頁面和組件中復用接口請求代碼，可以將接口請求的代碼進行二次封裝，例如定義一個request()函數，在函數中進行uni.request()請求，並返回Promise對象，方便鏈式調用。

//util.js文件中定義請求方法
export function request(url, data, method='POST', header={}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json',
        ...header
      },
      success: res => {
        if (res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res.errMsg)
        }
      },
      fail: err => {
        reject(err.errMsg)
      }
    })
  })
}

//頁面或組件中調用請求方法
import { request } from '../utils/util.js'

onLoad: function() {
  request('/api/list', { pageNum: 1, pageSize: 10 }, 'POST', { Authorization: token })
    .then(res => {
      console.log(res)
    })
    .catch(error => {
      console.log(error)
    })
}

六、uniapp獲取請求到的數據

uniapp中可以通過Promise對象的then()方法來獲取異步請求到的數據，通過catch()方法來獲取請求失敗的錯誤信息。

//示例代碼
import { request } from '../utils/util.js'

onLoad: function() {
  request('/api/user', { id: 1 }, 'POST', { Authorization: token })
    .then(res => {
      console.log('請求成功：', res)
    })
    .catch(error => {
      console.log('請求失敗：', error)
    })
}

七、uniapp開發app請求錯誤

在開發uniapp時，難免會遇到各種各樣的錯誤，例如請求參數錯誤、網絡連接失敗等等。我們可以通過對錯誤信息進行處理或者直接將錯誤信息反饋給用戶，提高用戶體驗。

//示例代碼
import { request } from '../utils/util.js'

onLoad: function() {
  request('/api/user', { id: null }, 'POST', { Authorization: token })
    .then(res => {
      console.log('請求成功：', res)
    })
    .catch(error => {
      uni.showModal({
        content: error,
        showCancel: false
      })
    })
}

八、uniapp發請求peding

在進行uniapp的post請求時，需要等待一段時間才能獲取到異步請求結果。可以通過showLoading()函數來顯示加載狀態，提高用戶的交互體驗。

//示例代碼
import { request } from '../utils/util.js'

onLoad: function() {
  uni.showLoading({
    title: '加載中...'
  })
  request('/api/user', { id: 1 }, 'POST', { Authorization: token })
    .then(res => {
      console.log('請求成功：', res)
    })
    .catch(error => {
      console.log('請求失敗：', error)
    })
    .finally(() => {
      uni.hideLoading()
    })
}

九、uniapp多個請求並發

在uniapp中，我們可以通過Promise.all()函數來實現多個請求的並發。該函數將多個Promise對象合併成一個Promise對象，只有當所有Promise對象都成功返回結果時，該Promise對象才會調用其成功回調函數，否則會調用其失敗回調函數。

//示例代碼
import { request } from '../utils/util.js'

onLoad: function() {
  uni.showLoading({
    title: '加載中...'
  })
  Promise.all([
    request('/api/list', { pageNum: 1, pageSize: 10 }, 'POST', { Authorization: token }),
    request('/api/user', { id: 1 }, 'POST', { Authorization: token })
  ]).then(([listRes, userRes]) => {
    console.log('接口1請求成功：', listRes)
    console.log('接口2請求成功：', userRes)
  }).catch(error => {
    console.log('請求失敗：', error)
  }).finally(() => {
    uni.hideLoading()
  })
}

以上就是uniapp中post請求的詳細闡述，包括了常見的問題和解決方案，以及代碼的封裝和調用方式，希望能夠對uniapp開發者有所幫助。