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;
       }
     })
      }

 

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

上一篇:【????????】谈谈 iOS 中图片的解压缩


下一篇:毕加索的艺术——Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选