Http 请求

此插件集成自优秀的开源请求库：luch-request ，可参考luch-request官方文档。

基本使用

uni.$c.http.方法名()，返回一个Promise对象。

uni.$c.http.get('/api/test',{params:{id:1}});
uni.$c.http.post('/api/test',{test:'测试'});
uni.$c.http.put('/api/test',{test:'测试'});
uni.$c.http.delete('/api/test',{test:'测试'});
uni.$c.http.upload('/api/test',{
  header: {
    'Content-Type': 'multipart/form-data'
  },
  // #ifdef MP-ALIPAY
  fileType: 'image', // 文件类型
  // #endif
  filePath: '',// 文件临时路径
  name: 'file',// 字段名
});

全局配置

配置方法

在入口文件main.js中配置。

// main.js
import App from "./App";
import {createSSRApp} from "vue";
import CookUni from "@/uni_modules/cook-uni";

export function createApp() {
  const app = createSSRApp(App);
  // cook-uni
  CookUni(app, {
    config: {
      http:{
        // #ifndef H5
        baseURL: 'https://api.example.com',
        // #endif
        
        // ...其他http请求配置
      },
      // ...其他组件或工具配置
    }
  })

  return {
    app,
  };
}

或者通过uni.$c.setConfig('http',{ 配置项 })方法进行全局配置。

uni.$c.setConfig('http',{
  baseURL: 'https://api.example.com',
})

配置项

{
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',
    // 自定义params 处理函数
    paramsSerializer: null,
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: {}, // 全局自定义参数默认值
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000,
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif
    // #ifdef H5
    // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
    // getTask: (task, options) => {
    // 相当于设置了请求超时时间500ms
    //   setTimeout(() => {
    //     task.abort()
    //   }, 500)
    // },
    // 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
    validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
        return statusCode >= 200 && statusCode < 300
    },
    // 是否尝试将响应数据json化。boolean 或者一个包含include的对象。非必填。默认true。include为数组，包含需要json化的method
    // forcedJSONParsing: {include: ['UPLOAD', 'DOWNLOAD']}
    // 是否尝试将响应数据json化
    forcedJSONParsing: true
}

拦截器

在请求之前拦截

http.interceptors.request.use((config) => { // 可使用async await 做异步操作
  config.header = {
    ...config.header,
    a: 1 // 演示拦截器header加参
  }
  // 演示custom 用处
  // if (config.custom.auth) {
  //   config.header.token = 'token'
  // }
  // if (config.custom.loading) {
  //  uni.showLoading()
  // }
  /**
   /* 演示
   if (!token) { // 如果token不存在，return Promise.reject(config) 会取消本次请求
      return Promise.reject(config)
    }
   **/
  return config
}, config => { // 可使用async await 做异步操作
  return Promise.reject(config)
})

在请求之后拦截

http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
  //  if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
  //    return Promise.reject(response) // return Promise.reject 可使promise状态进入catch
  // if (response.config.custom.verification) { // 演示自定义参数的作用
  //   return response.data
  // }
  console.log(response)
  return response
}, (response) => { /*  对响应错误做点什么 （statusCode !== 200）*/
  console.log(response)
  return Promise.reject(response)
})