Vue前端接口之封装axios

什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

我们使用vue开发程序时，在做和后端数据交换这版块，尤大大推荐使用axios库，因为axios不仅api简单，而且功能特性齐全。

axios所有api及使用方法可查看： axios官方文档 axios中文网

安装

使用yarn安装；

yarn add axios

或使用npm安装；

npm install axios

搭建目录

在src目录下创建一个单独的目录用来封装axios和封装各版块数据请求的api，考虑到接口模块化、域名统一管理化、以便于多人开发，做了如下目录搭建。

-src
	-request
    	-axios.js    //封装axios
        -api.js      //引入各个模块,统一封装在api.js里
        -baseUrl.js  //域名管理
        -module1.js  //模块一
        -mpdule2.js  //模块二

封装axios

查axios文档可知，可以创建一个axios实例，并做一些基础配置，请求拦截、响应拦截、错误统一处理等等。

/*axios.js*/
import axios from 'axios'
import router from '.../router/index'

const instance=axios.create() 

instance.defaults.timeout = 2500    //设置
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  //默认‘Content-Type’也是这个

// 添加请求拦截器
instance.interceptors.request.use((config)=> {
    // 在发送请求之前将用户token添加到config.headers里
    //发送请求到服务器，后台判断token是否过期，并返回相应状态码
  }, (error)=> {
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use((response)=> {
    // 对响应数据做点什么
    response.status===200?Promise.resolve(response):Promise.reject(response)
    return response;
  }, function (error) {
    // 对响应错误做点什么
    const {response}=error
    if(response){
    	//根据response.status做出相应操作，
        switch(response.status){
        	case 401:
            	router.replace({  //这里需要引入router
                	path:'/login',
                    query:{redirect: router.currentRoute.fullPath}
                })
                break;
            //再做其他状态码对应处理，这里可以封装一个hash表
        }
        return Promise.reject(error);
    }else{
    	//其他错误，如断网或者请求超时，则需要更新store里的网络状态
    }
  });
  
  export default instance

封装api

/*api.js*/
import module1 from './module1.js'
import module2 from './module2.js'

const api={
	module1,
    module2
}

export default api

域名统一管理

域名统一管理，方便统一切换和修改域名。

/*baseUrl.js*/
const baseUrl={
	url1:"https://test1.com",
    url2:"https//test2.com"
}
export default baseUrl

数据请求模块

将数据请求模块化，方便多人协作，避免命名的冲突，如果出现问题可根据版块找出bug。

/*module1.js*/
import instance from './axios.js'
import baseUrl from './baseUrl.js'

const module1={
	//模块1的各种数据请求方法
}
export default module1

/module2.js同module1一样的操作/
//...

组件中使用api

首先可以在app.vue中引入api，将api加载到Vue原型上,全局可调用。

/*app.js*/
import Vue from 'vue'
import api from './request/api.js'
Vue.prototype.$http=api

其他组件就可以全局调用this.$http.module1.someMethods()