请求方法示例

blackAngel
146 阅读2分钟

请求方法示例

  • 在src/utils/http.js 导出了5个函数并将其插入wx全局变量
  • 分别是wx.$http wx.$get wx.$post wx.$put wx.$delete
  • wx.$http只是对wx.request进一层的封装
  • 其它4个方法 只是wx.$http的快捷方式
  • wx.request 原来的参数都支持，下面讲新增的参数 | 属性 |符号 | 类型 | 默认值 | 必填 | 说明 | --- | --- | --- | --- | --- | --- | | dealy | | Number | 1000 | 否 | 在此时间内，请求还没回来的话，就显示加载中动画，单位ms.mask为true时 dealy为0 | mask | ^ | Boolean | false | 否 | showLoading 是否显示透明蒙层，防止触摸穿透 | onCatch | @ | Boolean|Function | false | 否 | 是否监听Promise.catch函数，当onCatch是一个函数时可以不传@符号 | validateToken | ~ | Boolean | true | 否 | 是否验证token(为true时获取不到token自动跳转至登录页面) | confirmBack | < | Boolean | false | 否 | 显示错误信息时，点击确认是否返回上一级页面 | showLoading | ! | Boolean | true | 否 | 发送请求前是否显示加载中动画 | hideLoading | !! | Boolean | true | 否 | 接口请求完是否关闭加载中动画 | displayErrorMessage| # | Boolean | true | 否 | 状态码不为200时，是否显示错误message

代码示例

wx.$http({
  url: 'v1/book/create',
  method: 'POST',
  data: {
    bookName: '百年孤独',
    author: '马尔克斯'
  },
  header: {
    // 只要存在token 就会携带
    // 所以正常开发情况下，可以不用考虑token
  },
  dealy: 1000,   
  mask: false,        
  onCatch: false,     
  validateToken: true,
  confirmBack: false,
  showLoading: true, 
  hideLoading: true,  
  displayErrorMessage: true
}).then(data => {
  // 状态码为200时（response.data.code === 200）执行这里 
  // do something...
}).catch(response => {
  // onCatch为true时，才会执行Promise.reject()
  // 如非必要，可以不监听Promise.catch 
  // 因为当请求不是200时，相应状态已处理
  // 错误信息也是默认弹窗的
  console.log(response) // 请求响应对象
  response.options // 如上传进来的参数会存储到response.options对象
  if(response.error) {
    // 请求出错、报错、超时 执行这里
  } else {
    // response.statusCode !== 200 || response.data.code !== 200
    // 执行这里
  }
})

另一种写法 async/await 也是个人比较推荐的写法

export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const { data } = await wx.$post('v1/books', params)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
      // do something...
    }
  }
}
  • 如上写法是不是简洁多了， 但是还有一个问题， 假设我想设置 mask onCatch validateToken 等参数呢？
  • 别担心，可以使用上面表格描述的符号代替
  • 符号取值与默认值相反
  1. 例如：如果不想校验token（默认为true校验token），则可以使用~代替
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      //如下post请求不会校验header是否存在token
      const { data } = await wx.$post('~v1/books', params)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
    }
  }
}
  1. 可以组合使用（不分前后），例如不校验token 和 不显示加载中动画，可以这样写
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const { data } = await wx.$post('~!v1/books', params)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
    }
  }
}
  1. 如果需要传header相关参数
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const { data } = await wx.$post('~!v1/books', params, { /**header相关参数放这里 */})
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
      // do something...
    }
  }
}
  1. 如果需要监听响应失败（这里指的是状态码不为200 都算响应失败）
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const onCatch = (response) => {
        // 如非必要，可以不传onCatch函数
        // 因为当请求不是200时，相应状态已处理
        // 错误信息也是默认弹窗的
        console.log(response) // 请求响应对象
        response.options // 请求的相应参数对象
        if(response.error) {
          // 请求出错、报错、超时 执行这里
        } else {
          // response.statusCode !== 200 || response.data.code !== 200
          // 执行这里
        }
      }
      const { data } = await wx.$post('~!v1/books', params, { /**header相关参数放这里 */}, onCatch)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
      // do something...
    }
  }
}
  1. 第三个参数如果是函数，会被处理成第四个参数onCatch
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const onCatch = (response) => {
        // 如非必要，可以不传onCatch函数
        // 因为当请求不是200时，相应状态已处理
        // 错误信息也是默认弹窗的
        console.log(response) // 请求响应对象
        response.options // 请求的相应参数对象
        if(response.error) {
          // 请求出错、报错、超时 执行这里
        } else {
          // response.statusCode !== 200 || response.data.code !== 200
          // 执行这里
        }
      }
      const { data } = await wx.$post('~!v1/books', params, onCatch)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
      // do something...
    }
  }
}
  1. wx.$get会把params转成url参数，如下params会自动转成 v1/books?page=1&size=10
export default {
  methods: {
    async getBooks() {
      const params = {
        page: 1,
        size: 10
      }
      const { data } = await wx.$get('~!v1/books', params)
      // 不用判断res.code === 200（切记）， 因为只有状态码为200时，才会运行到这里
      // do something...
    }
  }
}
avatar
文章
阅读
粉丝