vue封装axios方法

一、安装axios npm install --save axios

二、在src下面创建文件夹api(名字随意)=>api.js(接口集合)+http.js(封装的请求)

三、在main.js中引用api.js和http.js

//引入两个文件
import api from './api/api'
import http from './api/http'

//挂载到VUE实例，以便全局使用
Vue.prototype.api = api;
Vue.prototype.http = http;

四、开始在http.js中写方法

import axios from 'axios';
import { Message } from 'element-ui';
import router from '../router';

let localhosts = 'http://www.1232.com';  //请求的后台域名

axios.interceptors.request.use(config => {//请求之前(可以设置token)
    return config
},error =>{
    Message.error(error)
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {//数据拿到之后
    return response.data
},error => {
    Message.error('Http请求失败，请联系管理员');
    return Promise.reject(error.response);;
});

function successfun(res){//处理后台返回的非200错误
    if(res.code === 200){
        return res
    }else{       
        Message.warning(res.message);
        return res;
    }
}

function errorfun(res){
    if(res.code != 200){
        Message.error(res.message);
        return res;
    }
}

export default{
    post(url,data){//post请求
        return axios({
            method:'post',
            baseURL:localhosts,
            url,
            data: data,
            withCredentials: true,
            timeout:5000,//响应时间
        }).then(res => {
            return successfun(res)
        },err => {
            return errorfun(err);
        })
    },

    get(url,params){//get请求
        return axios({
            method:'get',
            baseURL:localhosts,
            url,
            params,
            withCredentials: true,
            timeout:5000,
        }).then(res => {
            return successfun(res)
        },err => {
            return errorfun(err)
        })
    }

    (delete,put等请求同上)...

}

五、写api.js

export default {

    login: "/login",

    ...

}

六、使用

原文链接：https://blog.csdn.net/abez_c/article/details/87186442