目录
- 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
<template>
...
<template>
<script>
import { login } from '@/api/test.js';
export default {
data() {
return {}
},
methods: {
async loginClick() {
login ({username:'admin',password:'admin'}).then((res) => {
//成功结果
console.log(res)
}).catch(err=>{
//失败结果
console.log(err)
});
},
}
}
</script>
