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