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() 甚是喜欢
若是有问题之处，依旧希望大家多多指正

巴特西

vue项目搭建（二） axios 封装篇

vue项目搭建（二） axios 封装篇

项目布局

最新文章

热门文章

巴特西

vue项目搭建 （二） axios 封装篇

vue项目搭建 （二） axios 封装篇

项目布局

最新文章

热门文章

vue项目搭建（二） axios 封装篇

vue项目搭建（二） axios 封装篇