vuecli项目封装axios

vuecli项目封装axios

（一）src目录下创建config文件夹，再创建index.js文件，配置开发和发布后的后台接口地址

export default {
    title:"",
    baseUrl:{
        dev:"",//开发的时候后台接口的地址
        // 在前端配置跨域时，这里改为dev:"/api/"
        pro:""//上线产品发布之后，后台接口的地址
    }
}

（二）同样在src目录下创建api文件夹，再创建index.js文件，对axios进行封装

import axios from 'axios';
import config from '@/config'; //这里config文件夹下只有index.js这一个文件,所以可以简写，若有多个文件，需写明是哪个文件，如:'@/config/index'

// 判断是开发环境下的baseUrl还是生产环境下的baseUrl
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;

class HttpRequest{
    constructor(baseUrl){
        this.baseUrl = baseUrl;
        // 请求队列
        this.queue = {};
    }

    getInsideConfig(){
        const config = {
            baseURL: this.baseUrl,
            header:{},
        }
    }

    interceptors(instance,url){
        // 拦截前端发出的请求
        instance.interceptors.request.use(config=>{
            // 处理config
            console.log("拦截和处理请求");
            return config;
        })

        // 拦截后台做出的相应
        instance.interceptors.response.use(res=>{
            // 处理响应
            console.log("处理响应");
            console.log(res);
            return res;
        },err=>{
            // 请求出问题，处理问题
            console.log(err);
            return {err:"网络出错了"};
        })
    }
    request(options){
        const instance = axios.create();//创造实例对象
        options = Object.assign(this.getInsideConfig(),options);
        this.interceptors(instance,options.url);
        return instance(options);
    }
}

const axiosObj = new HttpRequest(baseUrl);
export default axiosObj;

（三）建议将前端所有请求都写在一个js文件下，方便管理，这里在api文件下又创了一个getData.js文件

import axios from "@/api/index"; //这里导入的是前面封装好的axios文件

//请求登录的接口
export const login = (data)=>{
    return axios.request({
        url:"", //后端对应的接口,如果前端配置了跨域，这里直接写http://localhost:xx后面的内容
        method:'', //请求的方式，get,post等
        params:data, //请求方式为get所带的参数，两者只能出现一个
        data:data, //请求方式为post所带的参数，两者只能出现一个
    })
}

//请求注册的接口
export const register = (data)=>{
    return axios.request({
        url:"", 
        method:'post', 
        data:data, 
    })
}
...

（四）export导出的是一个对象，所以使用时，需带有{}，哪个页面需要用到接口，就在哪个页面引入

import { login } from '@/api/getData';

async xx(){
    await login();
}

完