uniapp中使用http发送请求和上传文件

install

$ npm i uni-http

基本使用

// api.js
import { UniHttp } from 'uni-http';

class Api extends UniHttp {
	config = {
		baseURL: 'https://jsonplaceholder.typicode.com',
		header: {
			'Content-Type': 'application/json'
		}
	};
	
  // 你可以在这里制作一个简易的拦截器
	request(...args) {
		console.log(args);
		return super.request(...args).then(res => res.data);
	}

	async hello() {
		return this.get("/todos/1");
	}
}

const api = new Api();

export { api };

import { api } from "api.js"
api.hello().then(data => { console.log(data); });

Get

import { UniHttp } from 'uni-http';

const api = new UniHttp({
  baseURL: 'http://localhost:3000'
});

const res = await api.get('/api/hello', {
  params: { name: 'ajanuw' },
  header: { 'x-id': 1 }
});

// or

const res = await api.get({
  url: '/api/hello',
  params: { name: 'ajanuw' },
  header: { 'x-id': 1 }
});

Post

import { UniHttp } from 'uni-http';

const api = new UniHttp({
  baseURL: 'http://localhost:3000',
  header: {
    'Content-Type': 'application/json'
  },
});

await api.post('/api/login', {
  data: {
    name: 'ajanuw'
  }
});

使用拦截器

class MyInterceptors {
  request(options) {
    options.header['x-token'] = 'xxxyyy';
    uni.showLoading();
  }
  complete(result, options) {
    uni.hideLoading();
  }
}

const api = new UniHttp({
  baseURL: 'http://localhost:3000',
  interceptors: [new MyInterceptors()]
});

拦截器类型

type OrPromise<T> = T | Promise<T>;
type C = IUniHttpConfig;
type RSCR = UniApp.RequestSuccessCallbackResult;
type GCR = UniApp.GeneralCallbackResult;

export interface UniHttpInterceptors {
  /**
   * 发送前拦截
   */
  request?: (options: C) => void;

  /**
   * 在success拦截
   */
  success?: (result: RSCR, options: C) => OrPromise<RSCR>;

  /**
   * 在fail拦截
   */
  fail?: (result: GCR, options: C) => void;

  /**
   * 在complete拦截
   */
  complete?: (result: GCR, options: C) => void;
}

上传文件

uni.chooseImage({
  success: async chooseImageRes => {
    const tempFilePaths = chooseImageRes.tempFilePaths;

    const r = await api.post('/api/upload', {
      name: 'file',
      filePath: tempFilePaths[0],
      data: {
        name: 'ajanuw'
      }
    });

  }
});

在h5上跨域，你可能需要设置一个拦截器

class MyInterceptors {
  request(options) {
    // #ifdef H5
    if(process.env.NODE_ENV === 'development') options.baseURL = '';
    // #endif
  }
}

const api = new UniHttp({
  baseURL: 'http://xxx.fun/',
  interceptors: [new MyInterceptors()]
});

manifest.json:

  "h5": {
    "devServer": {
      "https": false,
      "proxy": {
        "/api": {
          "target": "http://xxx.fun/",
          "changeOrigin": true,
          "secure": false
        }
      }
    }
  }

中断请求

import { UniHttp, UniHttpInterceptors, UniAbortController } from 'uni-http';

class MyInterceptors {
  fail(result) {
    if (result.errMsg === 'request:fail abort') {
      console.log('请求被中断')
    }
    return result;
  }
}

const api = new UniHttp({
  baseURL: 'http://xxx.fun/',
  interceptors: [new MyInterceptors()]
});

const abortController = new UniAbortController();

api.get('/api/cats', {
  abortController: abortController,
}).then(console.log)

// 中断请求
abortController.abort();

在请求发送前结束请求

class MyInterceptors {
  request(options) {
    // 将cancel设置为true，请求将不会发送
    // 并且会调用拦截器的fail和complete
    options.cancel = true;
  }

  fail(result) {
    // { errMsg: "request:fail cancel" }
  }
}

自定义发送请求的方式

这通常在h5上很有用

const api = new UniHttp({
  baseURL: 'https://jsonplaceholder.typicode.com',

  // #ifdef H5
  async requestFunc(url, options, success, fail, complete) {
    // console.log(url,options,success,fail,complete);
    try {
      const res = await fetch(url)
      const d = await res.json();
      success(d);
      complete(d);
    } catch (e) {
      fail(e)
    }
  },
  // #endif
  
});

await api.get('/todos/1').then(res => {
  console.log(res);
});

See also:

• options 参数 IUniHttpConfig
• 拦截器超类
• 发送过程
• uni.uploadFile
• uni.request