vue项目封装api接口

前言：vue的axios基于promise的http库，可以运行在浏览器和node环境中

一：api封装文件

request..js

import 'axios' from 'axios'//引用axios插件  npm install axios --s

import {Message} from 'element-ui'

import store from '@/store'

import {getToken} from '@/utils/auth'

//创建axios

const http= axios.create({

    baseURL :process.env.VUE_APP_BASE_API,//url = base url + request url

    timeout:15000//request timeout 

})

//request interceptors //创建拦截器

http.interceptors.request.use(

   config =>{

       if(store.getters.token){

            config.header['Authorization'] = getToken()

       }

      return config

   }

   error =>{

      console.log(error)

      return Promise.reject(error)

    }

)

//拦截器响应拦截

http.interceptors.request.use(

   response = >{

     const res = response.data

     if(res.code !== 200){

        Message({

            message:res.message||'Error',

            type:'error',

            duration:5*1000

        })

        return Promise.reject(new Error(res.message)||'Error')

    }else{

       return res

    }

    },

   error = >{

      Message({

         message:error.message,

         type:'error',

         duration:5*1000

      })

      return Promise.reject(error)

  }

   }

)

export default http

 

二、api引用 src/api/datas.js

import http from '@/utils/http'

export function getData (data){

     return http ({

           url:'xxxxx',

           method:'post',

          data

    })

}

三，.vue页面引用

import {getData} from '@/api/datas'

getData().then(res){

   if(res.code == 200){this.$message.success('请求成功')}

}

 

 

纯手敲，应用需要修改，另一个大哥网址

https://blog.csdn.net/fzy_1939/article/details/125889440