vue中axios的简单封装

在vue项目开发中，我们进行数据请求时，往往使用axios进行数据的请求，但原生的axios可能对项目的适配不太友好，所以需要进一步的封装。

一、封装axios实例 —— request.js

//引入axios
import axios from 'axios'
import { Message } from 'element-ui'
//创建一个新的axios实例
const service = axios.create({
    baseURL:process.env.VUE_APP_BASE_API,
    //设置超时时间，超过该时间就不会发起请求
    timeout:3000
})
service.interceptors.request.use(
    config=>{
        //？？？？？
        config.headers = {
            'Content-Type':'application/json' //配置请求头
          }
        config.headers["token"]="bcyeqbfuhwrufbruwbguerng"//配置token
        return config
    },
    error=>{
        console.log(error);
        return Promise.reject(error)
    }
)
service.interceptors.response.use(
    //请求成功处理
    response=>{
        const res=response
        if(res.code===0){
            return res
        }else{
            
        }
    },
    error=>{
        // Message.error(error.message)
        if (JSON.stringify(error).includes('timeout')) {
            Message.error('服务器响应超时，请刷新当前页')
          }
    }
)
export default service

二、封装请求——http.js

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http

三、在项目中使用

export default {
  created(){
    http.get("/api/joke/list",{num:3}).then(res=>{

      },
      err=>{

      },
       http.post("/api/user/reg",{
          username:"小陈"
        }).then(res=>{
          console.log(res);
        })
      )
  },
  name: 'Home',
  }
}