axios的二次封装--踩了好多天的坑

在src下面新建一个utli文件夹

然后在里面新建http.js和api.js

http.js代码

// 引入

import axios from "axios"

import {Message} from 'element-ui'

// import store from '../store'

// import router from '../router'

// 环境

// 创建实例时设置配置的默认值

var instance = axios.create({

// baseURL: process.env.BASE_URL, // api的base_url,

baseURL:baseURL,

timeout:15000,

headers:{

'Content-Type':'application/json',

"authorization":'1',

},

// withCredentials :true,

});



/****** request拦截器==>对请求参数做处理 ******/

instance.interceptors.request.use(config => { // 请求拦截 在发送请求之前做些什么

// 请求成功做的事情 configData 中包含：url、method等信息

// console.log(config+'11111111111111111');

return config

}, error => { // 请求失败做的事情

// console.log('qqqqqqqqqq');

Message.error({message: '请求超时!'});

return Promise.resolve(error);

// return Promise.reject(error)

})



/****** respone拦截器==>对响应做处理 ******/

instance.interceptors.response.use(

response => { //成功请求到数据

// console.log(response);

// console.log('wwwwwwwwwwwww');

const code = response.status;

if (code === 200 || code === '200') {

    return response;

  }else {

    // 非200请求抱错

    throw Error(response.data.errorMsg || '服务异常');

}

},

error => { //响应错误处理

// return Promise.resolve(error.response);

console.log(JSON.stringify(error));

// console.log('ggggggggggggggggg');

console.log(error);

// console.log(error.response.status+'111111111111');

if(error.response==null || error.response == undefined || error.response.status ==undefined){

console.log('kkkkkk');

Message.error({message: '服务器被吃了⊙﹏⊙∥'});

}

else{



const code = error.response.status;

switch (code) {

case 400:

Message.error({message: '请求参数错误'});

break

case 401:

Message.error({message: '未授权，请登录'});

break

case 403:

Message.error({message: '跨域拒绝访问'});

break

case 404:

Message.error({message: '请求地址出错'});

break

case 408:

Message.error({message: '请求超时'});

break

case 500:

Message.error({message: '服务器内部错误'});

break

case 501:

Message.error({message: '服务未实现'});

break

case 502:

Message.error({message: '网关错误'});

break

case 503:

Message.error({message: '服务不可用'});

break

case 504:

Message.error({message: '网关超时'});

break

case 505:

Message.error({message: 'HTTP版本不受支持'});

break

default:

}

}

return Promise.resolve(error);

// return Promise.reject(error)

}

);

export default instance;




// method方法，对应get/post/put/delete请求

// @param {String} url [请求的url地址]

// @param {Object} params [请求时携带的参数]



/**

* http封装

* @param {请求url} url

* @param {请求方法get/post/put/delete} method

* @param {请求参数} params

* 注：根据业务需求，delete用路径参数，需要单独区分

*/

export function http(url,method, params){

let paramsData = null;

if ( method === 'get' ){

paramsData = {params};

} else if ( method === 'post' || method === 'put' ) {

paramsData = params;

} else if ( method === 'delete' ) {

paramsData = `/${params}`;

}



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

method === 'delete' ?

instance[method.toLowerCase()](url+paramsData)

.then(res => { resolve( res && res.data) })

.catch(err => { reject(err.data) })

:

instance[method.toLowerCase()](url, paramsData)

.then(res => { resolve(res && res.data) })

.catch(err => { reject(err.data)} )

})

}

 

api.js代码

/**

* api接口统一管理

*/

import {http} from "./http";



// 获取数据列表

export const apiDeviceDetail = data => http("api/Parameter",'get', data);



export const arguListGetTableData = data => http("api/Parameter",'get', data);

//新增 & 修改

export const saveEditData = data => http("api/Parameter",'post', data);

//删除单条数据

export const deleteRowData = data => http("api/Parameter",'delete', data);

最后在自己的文件中使用

import {arguListGetTableData,saveEditData,deleteRowData} from '../../utils/api'

getTableData() {

arguListGetTableData()

.then((res) => {

// console.log(res);

// console.log(res.result.parameter);

// console.log(res.result.type);

this.orgData = res.result.parameter;

this.tableData = res.result.parameter;

this.orgTableData = res.result.parameter;

this.options = res.result.type;

})

.catch((err) => {

Message.error(err && err.errorMsg);

})

},