axios二次封装及使用

axios二次封装及使用

axios的请求响应及拦截内容封装

• • 一、http.js的写法
  • 二、api.js的写法及不同使用引入
  • • 1、写法一
    • 2、api写法二
    • 3、api写法三
  • 三、config.js文件中写入代码

一、http.js的写法

utils文件夹下https.js文件中写入

import axios from 'axios'
import { Message } from 'element-ui'
import config from '@/config'const service = ate({baseURL: '',timeout: 300000
})// service.defaults.withCredentials = true//允许跨域携带cookie信息
quest.use(config => {//请求头添加用户令牌信息config.headers['Authorization'] = '959df547d1b648ad96c30e9fef43a932';return config;},error => {ject(error);}
)
sponse.use(response => {//对响应数据进行状态处理判断用户的状态if (response.data && de != 200 && de != 0 && de != 403 && de != 401 && de != 407 && de != null && de != undefined) {(response.data.msg || ssage || 'Error')}if(de == 403 || de == 401){//可进行删除缓存信息等类似于用户登录超时或单点登录之类的操作};return response.data;},error => {ject(error);}
)
export default service;

二、api.js的写法及不同使用引入

1、写法一

import service from '@/utils/https'
import config from '@/config' //基础接口文件
export default {
//GET请求方式getYymc(params){return service({url:config.sjzlUrl+'/getYymc',method:"GET",params})},//POST请求changeYzryYd(data){return service({url:config.sjzlUrl+'/changeYzryYd',method:"POST",data})},
}
//在Vue文件中引用时
使用import api from ‘@/api’

2、api写法二

export function getTableSpaceSize(params) {return service({url: config.serviceURL_log + '/getTableSpaceSize',method: "GET",params,});
}，
export function postRequest(params) {return service({url: config.serviceURL_log + '/postRequest',method: "post",data: params,});
}
// vue文件中使用
import * as api from ‘’

3、api写法三

const getHotQuery = （params）=> {return  new Promise（（resolve）=> {（`${config.url}/getHotQuery `,{params}）.then(res => {resolve(res)}）}）
}，
const postHotQuery = （params）=> {return  new Promise（（resolve）=> {service.post（`${config.url}/getHotQuery `,params）.then(res => {resolve(res)}）}）
}
export {getHotQuery ，postHotQuery }// vue中使用import {getHotQuery ，postHotQuery} from ‘’

三、config.js文件中写入代码

let ipUrl = “XXX:”
let ipPort = ‘8080’，//后端接口端口号
const setting = {dev：{url：ipUrl + ipPort + ‘/后端服务名’}，test：{url：ipUrl + ipPort + ‘/后端服务名’}，pro：{url：ipUrl + ipPort + ‘/后端服务名’}
}
const config = v.NODE_ENV === 'production' ？setting.pro : v.NODE_ENV === 'development' ？setting.dev : st
export default config