📃 网络请求

发起请求

使用 uni.request(OBJECT) 发起一个请求。

例如：

uni.request({
  url: '//www.baidu.com', //仅为示例，并非真实接口地址。
  data: {
    text: 'uni.request'
  },
  header: {
    'custom-header': 'hello' //自定义请求头信息
  },
  success (res) {
    console.log(res);
  }
});

OBJECT 参数说明

success 返回参数说明

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

请求类的封装

平时使用习惯了 axios，于是按照 axios 的形式将 uni.request 封装了一层：

library/requset.js

class Axios {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }
  base (obj, method) {
    return new Promise((resolve, reject) => {
      const tokenObj = {token: uni.getStorageSync('token')}
      uni.request({
        url: `${this.baseUrl}${obj.url}`,
        method,
        dataType: obj.dataType ? obj.dataType : 'json',
        responseType: obj.responseType ? obj.responseType : 'text',
        data: obj.data ? obj.data : {},
        header: Object.assign(obj.header ? obj.header : {}, tokenObj),
        success (res) {
          resolve(res)
        },
        fail () {
          reject()
        }
      })
    })
  }
  get (obj) { return this.base(obj, 'GET') }
  post (obj) { return this.base(obj, 'POST') }
  put (obj) { return this.base(obj, 'PUT') }
  delete (obj) { return this.base(obj, 'DELETE') }
}
const baseUrl = 'https://www.baidu.com/'
export default new Axios(baseUrl)

main.js

import axios from './library/request'
Vue.prototype.axios = axios

在组件中的使用：

this.axios.get({
  url: 'index.html',
  data: { test: 'test' },
  header: { my_header: 'my_header'}
})
.then(res => console.log(res))
.catch(e => console.log(e))

拦截器模拟

上述封装, 只是一个简单的请求类封装, 并没有额外的功能, 比如响应拦截器, 可以使用以下方式简单地模拟一个拦截器：

class Axios {
  // ...
  base (obj, method) {
    return new Promise((resolve, reject) => {
      const tokenObj = {
        'Authorization': `bearer ${uni.getStorageSync('access_token')}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      uni.request({
        url: `${this.baseUrl}${obj.url}`,
        method,
        dataType: obj.dataType ? obj.dataType : 'json',
        responseType: obj.responseType ? obj.responseType : 'text',
        data: obj.data ? obj.data : {},
        header: Object.assign(obj.header ? obj.header : {}, tokenObj),
        success (res) {
          // 权限不足认证失败
          if (res.statusCode === 401 || res.data.status === -1) {
            interceptor()
          } else if (res.statusCode === 500 || res.statusCode === 400 || res.statusCode === 404) {
                    reject('接口调用失败')
          } else if (res.data.status === 0) {
            reject('数据请求失败')
          } else {
            resolve(res)
          }
        },
        fail () {
                  reject('未知错误')
        }
      })
    })
  }
  // ...
}
// ...

参考资料

• uni-app request
• uni-app Promise 封装