vue 封装axios 请求 统一管理方法1

1.在src文件下新建server文件夹

在里面新建api.js，server.js

reque.js 里面写入
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs';
import router from '../router/index'
import {
    MessageBox,
    Indicator
} from 'mint-ui';
// import store from '@/store' // vuex库
import {
    getToken
} from './request' // 获取/删除token
import {
    isFunction
} from 'util';
Vue.prototype.$ajax = axios;
var baseUrl = ''
if (process.env.NODE_ENV === 'development') {

    baseUrl = '配置自己接口前缀';
    // baseUrl = 'http://218.29.75.101:81';
} else {
    if (process.env.NODE_ENV === 'production') {
        let _host = window.location.host;
        baseUrl = "配置自己的接口前缀"
    }
} // create an axios instance
sessionStorage.setItem('baseUrl', baseUrl)
const service = axios.create({
    baseURL: baseUrl, // api 的 base_url
    timeout: 10000 // request timeout
})

service.interceptors.request.use(
    config => {
        Indicator.open('加载中...');
        if (config.method === 'post') {
            config.data = {
                ...config.data
            }
        } else {
            // let a = encodeURIComponent({...config.params }, "utf-8")
            // console.log(encodeURIComponent({...config.params }, "utf-8"))
            config.params = {
                ...config.params
            };
            // application/x-www-form-urlencoded
        }
        config.headers['content-Type'] = 'application/json;charset=UTF-8';
        if (sessionStorage.getItem('login')) {
            const tok = JSON.parse(sessionStorage.getItem('login')).token || '';
            config.headers['token'] = tok;
        }
        //  else {
        //     const tok = sessionStorage.getItem('token') || '';
        //     config.headers['token'] = tok;
        // }
        return config
    },
    error => {
        Indicator.close();
        // Do something with request error
        // console.log(error) // for debug
        // Promise.reject(error)
    }
)
service.interceptors.response.use(
    // response => response,
    res => {
        Indicator.close();
        if (res.data.code === '1006') {
            //console.log('拦截器--登录失效')
            // window.location.href = '/#/Logs?index=1'
        } else {
            // console.log(111);/404
            return res
        }
    },
    /**
     * 下面的注释为通过在response里，自定义code来标示请求状态
     * 当code返回如下情况则说明权限有问题，登出并返回到登录页
     * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
     * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
     */
    // response => {
    //   const res = response.data
    //   if (res.code === -2) {
    //     location.reload()
    //   }
    // },
    // response => {
    //   const res = response.data
    //   if (res.code !== 20000) {
    //     Message({
    //       message: res.message,
    //       type: 'error',
    //       duration: 5 * 1000
    //     })
    //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
    //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
    //       // 请自行在引入 MessageBox
    //       // import { Message, MessageBox } from 'element-ui'
    //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
    //         confirmButtonText: '重新登录',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         store.dispatch('FedLogOut').then(() => {
    //           location.reload() // 为了重新实例化vue-router对象 避免bug
    //         })
    //       })
    //     }
    //     return Promise.reject('error')
    //   } else {
    //     return response.data
    //   }
    // },
    error => {
        if (error.message.indexOf(404) !== -1) {
            let url = window.location.href
            let index = url.indexOf('#')
            let newUrl = url.substring(0, index + 2)
            window.location.href = newUrl + '404'
        }
        return Promise.reject(error)
    }
)

export default service

 

 

 

在api.js里面

import request from './reque'; //引入reque.js
// import reque from './reque'
import qs from 'qs';



// ----------------------------
/*获取推荐套餐*/
export function person(params) {
    return request({
        url: `/naire2/recommend/person`,
        method: 'get',
        params
    })
}
/*获取答题内容*/
export function getAnswerDetail(params) {
    return request({
        url: `/naire2/answer/getAnswerDetail`,
        method: 'get',
        params
    })
}
/*修改亲友*/
export function updateFriend(data) {
    return request({
        url: `/gzs/my/updateFriend`,
        method: 'post',
        data
    })
}
/*删除亲友*/
export function deleteFriend(params) {
    return request({
        url: `/gzs/my/deleteFriend`,
        method: 'get',
        params
    })
}
/*添加亲友*/
export function addFriend(data) {
    return request({
        url: `/gzs/my/addFriend`,
        method: 'post',
        data
    })
}
/*获取亲友*/
export function getFriendList(params) {
    return request({
        url: `/gzs/my/getFriendList`,
        method: 'get',
        params
    })
}
/*注册登录得验证码*/
export function sendLoginSmsCode(data) {
    return request({
        url: `/gzs/account/sendLoginSmsCode`,
        method: 'post',
        data
    })
}
/*民族*/
export function selectNationList(params) {
    return request({
        url: `/gzs/my/selectNationList`,
        method: 'get',
        params
    })
}
/*根据code获取微信用户*/
export function loginByOpenId(data) {
    return request({
        url: `/gzs/account/loginByOpenId`,
        method: 'post',
        data
    })
}
export function getWechatOpenIdByCode(params) {
    return request({
        url: `/gzs/account/getWechatOpenIdByCode`,
        method: 'get',
        params
    })
}
/*首页*/
export function index(params) {
    return request({
        url: `/gzs/index/index`,
        method: 'get',
        params
    })
}

/*注册*/
export function loginOrRegisterByPhone(data) {
    return request({
        url: `/gzs/account/loginOrRegisterByPhone`,
        method: 'post',
        data
    })
}
/*登录*/
export function login(data) {
    return request({
        url: `/gzs/account/login`,
        method: 'post',
        data
    })
}
export function saveAndNext(data) {
    return request({
        url: `/naire2/answer/saveAndNext`,
        method: 'post',
        data
    })
}
export function naire(params) {
    return request({
        url: `/naire2/naire/`,
        method: 'get',
        params
    })
}


export function logincodecardN(params) {
    return request({
        url: `/electronLead/patientInfo_code_phone`,
        method: 'get',
        params

    })
}

export function staticResources(params) {
    return request({
        url: `/gzs/electronLead/index/staticResources`,
        method: 'get',
        params
    })
}

/*体检项目*/
export function projectlist(params) {
    return request({
        url: `/electronLead/patientInfo`,
        method: 'get',
        params
    })
}

/*弃检静态数据*/
export function qijianShowdata(params) {
    return request({
        url: `/electronLead/uncheckedList`,
        method: 'get',
        params
    })
}

/*点击确定申请退检*/

export function sureTuijian(data) {
    return request({
        url: `/electronLead/saveItemReturn`,
        method: 'post',
        data
    })
}
/*资讯列表*/
export function getNewsArticleList(params) {
    return request({
        url: `gzs/news/getNewsArticleList`,
        method: 'get',
        params
    })
}

/*资讯详情*/
export function ArticleListdatail(params) {
    return request({
        url: `gzs/news/getNewsArticleInfo`,
        method: 'get',
        params
    })
}

/**发送有yzm*/

export function codesend(data) {
    return request({
        url: `/gzs/account/sendLoginSmsCode`,
        method: 'post',
        data
    })
}

在reque。js里面

 

使用的时候

import { staticResources} from "../server/api.js"
  import axios from 'axios';

   ArticleListdatail({
          id:this.$route.query.id
     }).then((res)=>{
       if(res.data.code==1){
         this.title=res.data.data.title;
        this.updateTime=res.data.data.updateTime;
        this.contents=res.data.data.content;
       }
     })
      }