Vue移動端系列 =＞ [02-1] 登陸註冊的函式封裝

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 default { login };

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