axios庫api封裝

封裝api的目錄結構如下：

接口返回值包括狀態碼、說明信息、數據內容也可能是異常信息，爲了避免在調用每個接口時都需要針對異常進行捕獲，所以這裏對ajax請求進行了封裝，在ajax.js中編輯如下代碼:

import axios from 'axios'
axios.defaults.baseURL = '/api'
axios.defaults.timeout =  10000

//添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 將token給到一個前後臺約定好的key中，作爲請求發送
  let token = '' // 獲取token的方法
  if (token) {
    config.headers['Authorization'] = token
  }
  return config;
}, function (error) {
  console.log("進入request  error", error)
  return Promise.reject(error);
})

//添加響應攔截器
axios.interceptors.response.use(function (response) {
  // ajax響應攔截內容，可用於判斷是否登錄等業務邏輯
  return response
}, function (error) {
  return Promise.reject(error)
})

export default function ajax(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    let promise
    // 1.執行異步請求
    if (method==='GET'){
      promise = axios.get(url, {
        params: data
      })
    } else if (method==='POST'){
      promise = axios.post(url, data)
    }
    // 2.如果成功了，調用resolve
    promise.then(res => {
      // 直接獲取response的data
      resolve(res.data)
    }).catch(err => {
      // 3.失敗後不調用reject
      console.log(err.message)
    })
  })
}

進行接口定義是非常的簡單，只需要確認訪問接口的方法、接口需要傳遞的參數以及接口訪問的地址，內容如下：

import ajax from './ajax'
export const baseUrl = 'http://localhost:8080/'
// 用戶綁定
export const bindUser = (username,password) => ajax(baseUrl + 'mobile/login',{password, username}, 'POST')
// 獲取地區詳細信息
export const getArea = (user_id) => ajax(baseUrl + 'mobile/area', {user_id}, 'GET')

至此已經完成了接口的封裝和定義，下面可以在項目中進行接口的調用了，使用方式如下：

async bindUser(){
    this.isLoading = true
    const response = await bindUser('用戶名','用戶密碼')
    if(response.code==SUCCESS_CODE){
        // '綁定成功'
        // response.data
    } else {
        // '綁定失敗'
        // response.msg
    }
}

只需要關注返回值內容，異常統一捕獲