vue項目搭建 （二） axios 封裝篇

vue項目搭建 （二） axios 封裝篇

項目布局

vue-cli構建初始項目后，在src中進行增刪修改

// 此處是模仿github上  bailicangdu  的
├── src   
|   ├── apis                                    
|   |   ├── api.js                              // 接口詳情配置      
│   ├── components                              // 組件
|   |   ├── common                              // 公共組件  
│   ├── config                                  // 基本配置
│   │   ├── fetch.js                            // 獲取數據
│   ├── service                                 // 數據交互統一調配
│   │   ├── getData.js                          // 獲取數據的統一調配文件，對接

• fetch.js

import axios from 'axios'
import qs from 'qs'
import { baseUrl, isFrom } from './../apis/api.js'
const baseURL = baseUrl
// 假設 api里定義了一個請求頭類型 
const isFrom = isFrom
const headers = isFrom ? {'Content-Type': 'application/x-www-form-urlencoded'} : {'Content-Type': 'application/json', 'Accept': 'application/json'}
// axios實例
const instance = axios.create({
    baseURL,
    headers,
    timeout: 10000,
})
/**
 * get 請求數據進行修改  默認以對象形式傳參
 */
function getDataConfig(data = {}) {
  if (typeof data !== 'object') return data
  const arr = []
  for (let key in data) {
      let res = `${key}=${data[key]}`
      arr.push(res)
  }
  const str = arr.join('&')
  return str
}
/**
 * 請求數據攔截
 */
instance.interceptors.request.use( config => {
    if (isForm && config.method === 'post') config.data = qs.stringify(config.data)
    // 此處應該行不通
    // if (config.method === 'get') config.data = getDataConfig(config.data)
    return config
}, error => {
    return Promise.reject(error)
})
/**
 * 響應數據攔截
 */
instance.interceptors.response.use(response => {
    return response.data
}, error => {
    return Promise.reject(error)
}) 
const fetch = {
  post(url, request, status = '0000') {
      return new Promise((resolve, reject) => {
          instance({
              method: 'post',
              url,
              request,
          }).then( response => {
              const res = response.data
              // 正確
              if (res && response.status === status) {
                  resolve(res)
              }
              //錯誤
              reject(res)
          }).catch(error => {
              //錯誤
              reject(error)
          })
      })
  },
  get(url, request, status = '0000') {
      const data = getDataConfig(request)
      return new Promise((resolve, reject) => {
          instance({
              method: 'get',
              url: url + '?' + data     
          }).then(response => {
              const res = response.data
              if (res && response.status === status) {
                  response(res)
              }          
              resject(res)
          }).catch(error => {
              reject(error)
          })
      })
  }
}
export default fetchs

• service
  • getData.js

// apis getTableList
import fetch from './../config/fetch.js'
import { apis } from './../apis/api.js'
export const  getTableList = data => fetch.post(apis.getTableList, data)

• component
  • table.vue (某個組件)
  • 注意 單個請求多個請求

// js
import {getTableList, getList} from './../service/getData.js'
export default {
    created() {
      this.sendPost()
    },
    methods: {
        async sendPost() {
            // 請求單個數據
            const res = await getTableList(data)
            // 多個數據同時請求
            cosnt [r, list] = await Promise.all([getTableList(data), getList(data)])
            console.log(r, list)
        }
    }
}

至此，封裝axios差不多完結，這算是花費自己幾周的時間，來想的吧

• 有的人人為在請求時排除接口相同的請求，但是我碰到過，統一接口，通過傳入不同參數，可以拿到不同數據，因而不太建議排除，若是排除還需更加細致為好
• 並發目前是我人為比較好的處理方式，之前考慮axios.all感覺封裝很麻煩，突然看到有人使用 await Promise.all() 甚是喜歡
• 若是有問題之處，依舊希望大家多多指正