在Vue-cli项目中对axios封装复用的方式

前言：

在开发Vue项目时，会常遇到http请求，那么就会用到axios。使用axios发起一个请求是比较简单的事情，但随着项目越来越大，请求越来越多而引起的代码重复，会非常麻烦。那本文会介绍一下如何封装请求，做到复用的效果。

 

事前准备：

              安装axios              npm install axios –save

              接口代理设置

//文件位置：config/index.js

proxyTable: {

  '/api': {

    target: '',  // 通过本地服务器将你的请求转发到这个地址

    changeOrigin: true,  // 设置这个参数可以避免跨域

    pathRewrite: {

      '/api': '/'

    }

  },

}

 

封装：

              首先在src下新建一个文件夹，为了方便区分我命名为myAxios。然后在该文件夹下创建三个js文件：

             

              fetch.js：

import axios from "axios";

 

export function fetch(options) {

    return new Promise((resolve, reject) => {

        const instance = axios.create({

            headers: {

                //'Content-Type': 'application/x-www-form-urlencoded'

            },

            timeout: 30000  //30秒超时

        });

 

        instance(options)

            .then(response => {

                if(response.data.ErrorCode == 0){

                    resolve(response.data.Data);

                }else{

                    console.log("有问题:",response.data.ErrorMsg)

                }

            })

            .catch(error => {

                console.log("请求异常信息:",error);

                reject(error);

            });

    });

}

 

              url.js：

export default {

    myURL: '/api'

}

 

              api.js：

import { fetch } from './fetch.js';

import api from './url.js';

 

export function myAxios(issuer, userData={}, mode='post') {

    //设置传入值为 接口地址、上传数据(可为空)、访问方式(默认post)

    return fetch({

        url: api.myURL+issuer,

        method: mode,

        data: userData

    })

}

 

调用：

              在需要使用的地方引用api.js ：import { myAxios } from ‘@/myAxios/api.js’

 

              myAxios('url')

                .then(res => {

console.log(res);

                }).catch(err => {

                    console.log(err);

                });

 

 

大致流程就是这样的，也正好是个人在开发时遇到的复用问题，算是拿出来分享了。这样做一是为了代码整洁，二是方便今后的开发和后期维护。

 

参考博客：https://blog.csdn.net/OBKoro1/article/details/78450040?locationNum=4&fps=1

下载此文档：在Vue-cli项目中对axios封装复用的方式（周弋翔）   类型：docx,   大小：17 KB