vue中axios的封装以及使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios
在src下新建 network 文件夹
network文件夹： 网络模块 放网络请求
index.js入口文件 core.js 参数的封装 config.js 请求方法的管理

config.js

export const GET="get";
export const POST="post";
export const path ={
    list:'/small4/shop/goods/list'
};

core.js

import axios from 'axios';
import {GET, POST, path} from './config';
import {Loading,Message} from "element-ui";

//创建一个axios实例 返回一个axios对象
const instance = axios.create({
    baseURL: 'https://api.it120.cc'  //发送请求时会在url前面拼接 baseURL
    // timeout: 1000,
 //设置axios为form-data
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    transformRequest:[function (data) {
        let ret = '';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }]
});

// 创建loading实例
var loading = null;
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    loading = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    return config;
}, function (error) {
    // 对请求错误做些什么
    Message(error);
    console.log("========>",error);
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    setTimeout(() => {
        loading.close();
    }, 2000);
    return response;
}, function (error) {
    // 对响应错误做点什么
    Message(error);
    console.log("========>",error);
    return Promise.reject(error);
});

//抛出 request 方法 接收三个参数 1.请求方式 2.请求路径 3.传递的参数
export function request(methods, url, params) {
    switch (methods) {
        case GET:
            return get(url, params);  //把promise对象 返回 
        case POST: 
            return post(url, params)
    }
}

//get请求
function get(url, params) {
    //axios请求  返回的是promise对象 有返回值 后续可以直接调用then catch 等方法
    return instance.get(url, params)
}
//post请求
function post(url, params) {
    return instance.post(url, params)
}

index.js

import {GET, POST, path} from './config';
import {request} from './core'; //引入core模块中抛出的request方法

const network = {
    getGoodsList(params) {
        //      request(methods, url, params)
        return request(GET, path.list, params);  //把promise对象 返回 
    }
};
//抛出network 
export default network;

在main.js 里 全局配置 network

import network from './network/index'
Vue.prototype.$network=network;

在Home.vue中使用

mounted() {
          //network里有 getGoodsList 方法  并需要接收参数
            this.$network.getGoodsList({
                page: 1,
                pageSize: 50
            }).then(res => {
                console.log(res);
            }).catch(Err => {
                console.log(err);
            })
        }