uniapp 简单网络封装

对uniapp的网络请求进行简单的封装，和vue中axios的网络封装用法类似

/**
 * 网络封装
 */
const defaultConfig = {
	baseUrl: '',
	timeout: 5000
}
const request = params => {
	var promise = new Promise((resolve, reject) => {
		// 加载loading
		uni.showLoading({
			title: '加载中'
		})
		let url = defaultConfig.baseUrl + params.url
		// 判断token
		let token = uni.getStorageSync('token')
		if(!token) {
			uni.navigateTo({
				url: 'pages/login/login'
			})
			return false
		}
		// 网络请求
		uni.request({
			url,
			data: params.data,
			method: params.method,
			timeout: defaultConfig.timeout,
			header: {
				'Authorization': token
			}
			success: res => {
				uni.hideLoading()
				if(res.statusCode === 200) {
					// TODO
					
					resolve(res)
				} else {
					// 返回错误信息
					reject(res.data)
				}
			},
			fail: err => {
				uni.hideLoading()
				// TODO
				
				reject(err)
			}
		})
	})
	return promise
}

export default request

API集中管理

import request from './utils/request'
export const testApi = params => {
  return request({
    method: 'GET',
    url: '/test/test',
    params
  })
}

调用示例

import { testApi } from './api/test'
 methods: {
    async testFn() {
      const { data } = await testApi ({
        id: 1
      })
      if(data.statusCode === 200) {
      	// TODO
      } 
    }
  }

拦截器

uni.addInterceptor('request', {
  invoke(args) {
  	// 设置token
  	args.header = {
  	  ...args.header,
	  token: 'xxx'
  	}
  return args
  },
  success(args) {
    console.log('interceptor-fail',args)
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})