vue中封装axios的两种方法

简述

   使用源生的axios要按照它的格式进行参数的设置，相应的请求和接收，有时候需要对其进行封装，以此来更加适应于项目中的各种请求类型，使请求格式更加统一（如统一的配置参数，请求格式以及响应接收数据方式），使用更加方便，下面就介绍两种封装方法。

一、简单封装：

新建http.js，将axios请求封装到里面

import axios from 'axios'

 

设置请求延时和请求根目录：

//延时设置

axios.defaults.timeout = 5000;

//根请求路径设置

axios.defaults.baseURL = 'http://.......'

 

设置请求拦截器和响应拦截器：

  

//设置请求拦截器

axios.interceptors.request.use((config)=>{

    //请求前做一下事情，比如携带token，字符验证，空格清理等等

    doSomething();

    return config;

},(error)=>{

    //以各种方式提示错误,并抛出

    return Promise.reject(error);

})

 

//设置响应拦截器

axios.interceptors.response.use((response)=>{

    if(response.data.success){

        //根据后端返回状态来决定怎么处理

    }

},(error)=>{

      return new Promise.reject(error);

})

 

 

封装axios的get请求为httpGet:

//封装get请求

export function httpGet(url,param){

 

    return new Promise((resolve,reject)=>{

        axios.get(url,params).then((response)=>{

            resolve(response);

        },err=>{

            reject(err)

            //捕捉错误并抛出

        }).catch((error=>{

            reject(error)

        }))

    })

}

 

 

封装axios的post请求为httpGet:

 

//封装post请求

export function httpPost(url,param){

    return new Promise((resolve,reject)=>{

        axios.post(url,param).then(response=>{

            resolve(response)

        },err=>{

            reject(error);

               //捕捉错误并抛出

        }).catch(error=>{

            reject(error)

        })

    })

}

 

抛出定义方法，是外部能调取：

export default {

  fetchPost,

  fetchGet,

}

 

 

封装好后，就可以在组件中引入http.js,使用http.httpGet(url,param)和http.httpPost（url,param）进行请求了。

例如：

 https.HttpPost(url, params)

        .then(result => {

          //操作返回结果result

       }).catch(error => {

          console.log(error);

        });

二、封装request，大型项目：

涉及到中大型项目，原生axios对项目的适配不够好，将axios封装成request，保持项目中数据请求和响应的统一性。包含了对axios的封装，对各请求的封装（各请求分模块统一封装到专用的接口文件中）

1.封装axios

首先，创建request.js,引入axios，新建service为axios对象：

 import axios from "axios";

 

const service = axios.create({

    //延时

    timeout:15000,

    //设置允许跨域(axios默认不允许跨域)

    withCredentials:true,

    //路径访问根目录

    baseURL:'http://localhost:8080'

});

 

同样，设置请求拦截器和相应拦截器：（拦截器中简单的写了关于登录状态和token的操作）

   //请求拦截器

service.interceptors.request.use(

    config=>{

        if(store.getters.login_state == false)

        {

            store.dispatch('loginOut')

            router.push({

                path:'/login'

            })

        }

        else{

             if(store.getters.token){

                 config.headers["Authorization"] = store.getters.token;

            }

            return config;

        }

    },error =>{

        Promise.reject(error);

    }

)

 

 

//响应拦截器

service.interceptors.response.use(

    response =>{

        if(response.code !=200)

        {

            if(response.code == 401){

                store.dispatch('loginOut')

                router.push({

                    path:'/login'

                })

            }

        }

        else{

            return Promise.resolve(response.data);

        }

    },error=>{

        return Promise.reject(error);

    }

)

 

 

最后将service对象抛出：

export default service;

2.封装访问接口

   将各模块需要用到的接口分模块的统一封装到api文件夹下，目录如下图：

   （这里面的http.js是我第一部分写的封装方法，忽略它）

 

比如login.js是专门用于登录、登出的接口封装，base.js是获取基本信息的接口封装，来看看login.js

   首先是引入我们封装好的request:

   import request from '../util/request'

 

然后定义登录登出方法：

  export function login(data){

    return request({

        url:"/login",

        method:"post",

        data

    });

}

 

 

export function logOut(){

    return request({

        url:"/loginOut",

        method:"get"

    })

}

 

抛出封装的方法：

export default {

    login,

    loginOut

}

 

到此，对axios和接口的封装就完成了。在组件中引入想要使用过的接口模块，如login，就可以直接调用进行使用了,例如，在组件中使用login,

      login.login(userInformation)

封装主要作用除了方便调用，统一数据处理外，还有就是是在请求拦截器和响应拦截器上，对请求之前和响应之后做一些操作，例如登录状态，token设置，根据响应状态执行不同操作等。