1.首先需要创建一个config文件夹
里面创建url.config.js文件
// 这个文件就是我们整个项目里面的一些常量和url地址
// 让我们在检查我们项目的时候,一眼就可以知道项目的大概方向
export default {
token: 'TOUTIAO_TOKEN',
baseURL: 'http://ttapi.research.itcast.cn/app/v1_0/',
login: 'authorizations',
};
2.在request.js里面导入url.config.js
import axios from 'axios';
import config from '@/config/url.config';
const request = axios.create({
baseURL: config.baseURL,
});
export default request;
3.在use.js里面改
import request from '@/utils/request';
// import { config } from 'vue/types/umd';
import config from '@/config/url.config';
// 登录请求
// 按需导入
export const login = (data) => {
return request({
url: config.login,
method: 'POST',
data,
});
};
// export const a = 10;
// export function fn() {}
// 这个是es6的模块化规范,一个文件只能有一个默认导出,可以有多个单独的导出
// 如果是默认导出,在引入的时候 import 随便写变量名 from 'xxxx'
// 如果是单独导出 在引入的时候 import 具体的同样的名称 from 'xxxx'
// 默认导出
// export default { login, a, fn };
export const smsCodes = (data) => {
return request({
method: 'GET',
url: config.smsCodes + data,
});
};
export default { login ,smsCodes};
4.在utils里面创建asyncErrorHandler.js文件
封装我的try catch函数,以及错误请求显示
// 我这个函数是专门来处理 程序里大量的try。。catch的
// 在写返回值得时候,要按照nodejs里面的error first的原理,错误对象优先的手动,吧错误对象放在第一位
import { Toast } from 'vant';
export default (promise) => {
return promise
.then((res) => {
return [null, res];
})
.catch((err) => {
Toast.fail('请求失败,请重试');
return [err, null];
});
};
5.在我的请求函数里面调用wo-封装的函数来进行简化操作
// 登陆注册按钮
async onSubmit() {
const [err, res] = await asyncErrorHandler(login(this.userInfo));
console.log(err, res);
},