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);
},