总结:vue中Axios的封装-API接口的管理

vue中axios的封装

在vue项目和后端交互获取数据时,通常使用axios库,官方文档

浅谈在项目中axios的简单二次封装

安装

npm install axios; //安装axios

//cnpm install axios;//或者使用镜像下载.

#### 引入组件

**通常情况下,在项目src目录下创建request文件夹,然后创建http.js和api.js文件。**

- http.js用来二次封装axios;

-  api.js用来统一管理后端接口;

**在http.js文件中**

- 引入axios;

- 引入qs,用于序列化post类型的数据。

- 引入ui提示框,根据自己u进行修改;**[推荐elementui文档]**



 环境切换

在http.js的文件中的axios.defaults.baseURL可以设置axios的默认请求地址。配合不同的运行指令进行开发不同环境的数据。

另附配置[vue不同环境配置不同打包命令]

// 环境的切换

if (process.env.NODE_ENV == 'development') {   

    axios.defaults.baseURL = 'https://www.baidu.com';}

else if (process.env.NODE_ENV == 'debug') {   

  axios.defaults.baseURL = 'https://www.ceshi.com';

}

else if (process.env.NODE_ENV == 'production') {   

      axios.defaults.baseURL = 'https://www.production.com';

}

请求默认值的设置

**通过axios.defaults.timeout设置默认的请求超时时间。**

//设置默认的请求超时时间

axios.defaults.timeout = 10000;

**设置默认请求头和token**

//设置post的请求头

axios.defaults.headers.post['Content-Type'] = 'application/json';

//设置默认token 一般有权限不在这里设置

//axios.defaults.headers.Authorization=token;

请求拦截

**token拦截**

一般情况下,发送请求必须带有token进行验证。做权限的话这里需要注意。

axios.interceptors.request.use(

config => {

    let token = localStorage.getItem("header");

    if (token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token

      config.headers.token = `${token}`;

    }

    return config;

  },

  err => {

    this.$router.push("/login")

    return Promise.reject(err);

  });


**响应拦截**

*这里需要根据后端协商,根据后端返回状态码进行处理*


axios.interceptors.response.use(function (response) {

  if (response.status >= 400) {

    localStorage.clear();// 删除已经失效或过期的token(不删除也可以,因为登录后覆盖)

    router.replace({

      path: '/login', // 到登录页重新获取token

      query: {

      //回到当前页面

        redirect: router.currentRoute.fullPath

    }

    })

  }

  return response

}, function (error) {

  if (error.response) {

    if(error.response.status===403){

    Message({

        showClose: true,

        message: '登录过期',

        type: 'error'

    });

        localStorage.clear();

        Cookies.set("user","",-10);

        router.replace({

          path: '/login' // 到登录页重新获取token

        })

    }else if(error.response.status===405){

      Message({

        showClose: true,

        message: '权限不足,请联系管理员',

        type: 'warning'

    });

    router.replace({

    path: '/error',

    })

    }else if(error.response.status===500){

      Message({

        showClose: true,

        message: '服务器异常',

        type: 'error'

  });

    }

    }

  return Promise.reject(error)

})

封装get和post方法

*axios封装的方法有很多,比如get,post,delete,put等方法。这里简单介绍get和post的封装。*

**post**

/**

* post方法,对应post请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

export function post(url, params) {

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

        axios.post(url, params)

            .then(res => {

                resolve(res.data);

            })

            .catch(err => {

                reject(err.data)

            })

    });

}

**get**

/**

* get方法,对应get请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

export function get(url, params) {

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

        axios.get(url, {

            params: params

        }).then(res => {

            resolve(res.data);

        }).catch(err => {

            reject(err.data)

        })

    });

}

vue中api的封装

*首先在api.js中引入在http.js中封装的get和post两种方法。*

import { get, post } from './http'

*不同参数的封装接口方法*

export const Login = p => get('/api/admin/login', p);

export const Registry = p => post('/api/admin/registry', p);

//路径参数封装

//export const  Api= p => post('/api/'+ p);

//多参数封装

export const  Api=( p,q )=> post('/api/'+ p+“/"+q);

*页面中使用方法*

import { Login,Registry } from "@/request/api"

export default {

name:"app",

data(){

return{

message:{

uname:"",

upwd:""

}

}

},

methods:{

login(){

Login(this.message).then(res=>{

....请求成功的处理

})

}

}

}

例外附上:

1.[gulp安装与使用]

2.[搭建基于webpack的vue环境]

3.[浅谈Vue项目优化心得]

4.[总结:搭建Vue项目心得]

5. [总结:vue中Axios的封装-API接口的管理]