【uni-app】uni.request封装

uni.request官方api文档传送门

目录

• H5端处理跨域
• 封装(参数介绍)
• 使用

H5端处理跨域(不需要可以跳过)

H5 端本地调试需注意跨域问题,可以通过manifest.json下的H5中devServer.proxy 选项来配置;

如下图 : 这会告诉开发服务器将任何存在/api路径的请求 (匹配到的请求) 代理到https://dev.test.com/

{
  ...
  "h5" : {
    ...
    "devServer" : {
        "proxy" : {
                "/api" : {
                    "target" : "https://dev.test.com/",
                    "changeOrigin" : true
                }
        }
     },
     ...
  }
  ...
}

一:封装

封装代码
新建utils/request.js存放我们封装的代码,代码如下

//utils/request.js
var baseURL = 'https://pro-dev.hanghangcha.com/api';
// #ifdef  H5
var baseURL = '/api';
// #endif
const timeout = 180000;

function request(config) {
    //请求参数追加access_token,若需要可以使用,getToken为uni.getStorageSync封装方法
    //const access_token = getToken();
    //if (access_token) {
    //config.header = {};
    //config.header['Authorization'] = 'Bearer ' + access_token;
    //config.data = config.data ? Object.assign(config.data, {
    //access_token
    //}) : {
    //access_token
    //};
    //}
    return new Promise((resolve, reject) => {
        uni.request(Object.assign(config, {
            url: baseURL + config.url,
            method: !config.method ? 'GET' : config.method.toLocaleUpperCase(), 
            timeout: timeout, //超时时间
            withCredentials: true, //跨域请求时是否携带凭证（cookies）
            success: (res) => {
                let statusCode = res.statusCode;
                //异常判断
                if (statusCode !== 200 && statusCode !== 204) {
                    uni.showToast({
                        title: res.data.error ? res.data.error.message : '网络错误!',
                        icon: 'none',
                        duration: 2000
                    });
                    //返回异常信息
                    reject(res.data || res.data.error.message);
                } else {
                    //返回正常信息
                    resolve(res.data);
                }
            },
            fail: (error) => {
                //抛出错误
                console.log('err', JSON.stringify(error))
                uni.showToast({
                    title: error.message,
                    icon: 'none',
                    duration: 2000
                });
                reject(err);
            }
        }));
    })
}
export default request

baseUrl
是我们进行请求时追加在请求地址前的前缀
由于在H5端调试已经配置了代理https://dev.test.com,所以如果需要H5端的话,上述代码加了个条件编译,仅在H5端生效,会覆盖掉var baseURL = 'https://pro-dev.hanghangcha.com/api'声明

// #ifdef  H5
var baseURL = '/api';
// #endif

config
用来传递动态参数,一般传参如下

{
    url: '/openUsers/login',//接口地址
    method: 'post',//请求方式
    //参数    
    data:{
      keyword:'关键字'
    }
}

封装过程中我们使用Object.assign(config,{})方式拼接配置

method
uni.request要求method必须为大写字母,我们使用toLocaleUpperCase将method转换为大写,这样传递的时候可以传get/post...等小写(或大写)都可以

timeout请求超时时间,默认60s

withCredentials跨域请求时是否携带凭证（cookies）,根据自身需要配置

...还有好多配置可以去文章顶部官网api链接查看详情

二:使用

路径结构如下

image.png

1.新建utils/request.js存放封装代码
2.新建api/test.js文件(我的路径是@/api/test.js),api是我统一存放接口的文件夹,test.js是导出接口方法的文件

// api/test.js
//导入封装的方法
import request from '@/utils/request.js'

export function login(data) {
  return request({
    url: '/openUsers/login',
    method: 'post',
    data
  })
}

3.页面使用pages/login/index.vue