axios的封装

安装

npm install axios; //命令行安装axios

引入

首先，新建一个js文件用于引入axios。比如说，新建一个http.js文件，在文件中引入步骤如下所示：

import QS from 'qs';//引入qs模块，为post型数据提供序列化（非常重要）
import { Toast } from 'vant';

# 设置请求超时
axios.defaults.timeout = 10000: //设置超时时间为10s```

# 设置post请求方式请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

设置请求拦截

首先，导入vuex。因为下面需要使用到里面的状态对象，用于实现登录认证功能。
代码如下：

    config => {  
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
     },    
     error => {        
        return Promise.error(error);    
})

注：在每次发送请求之前判断store中是否存在token，如果存在的话就将其添加到http请求的请求头当中去，用于后台通过token判断用户登录情况。同时，还存在一种情况是，token可能是过期的。所以在响应拦截器中要对返回状态进行判断。（响应拦截下面会讲到）

响应拦截

axios.interceptors.response.use(    
    response => {   
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {     
            //请求返回的错误妈需要与后台开发人员协商好，以便更快的定位错误。          
                case 401:    //用户未登录       
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;             
                case 403: //token过期
                     Toast({
                        message: '登录已过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                case 404:   //请求错误
                    Toast({
                        message: '该请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                default:  // 其它错误，直接抛出错误提示
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});

接下来是，封装get()和post()方法

//axios对应的请求方式有很多，这里主要讲解get与post。
首先是get方法的封装，封装方式如下：

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)        
    })    
});

通过上面的代码，我们可以看到，get函数有两个参数。第一个参数代表的是我们要请求的url地址，第二个参数代表的是请求该url时携带的请求参数。接下来是get请求返回的promise对象，成功时返回resolve，失败时返回reject。

export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

post方法的封装与上面的get类似，不同之处在于，post在提交参数的书写方式。post所携带的第二个参数是一个参数对象（在这里用到了QS模块！！！），而get的第二个参数是一个{ }。

以上呢，就是axios的基本封装了！

那么，当我们封装好axios以后要如何去使用呢？接下来我们就一起去了解一下api接口的实现》》》》

实现创建一个js接口文件，统一管理接口。
然后在该文件中引入get()和post()

//api.js
import {get, post} from './http.js';
export const login = p => post('http://www.xxxx.com/api/', p)

在这里我们定义了一个login方法，这个方法有一个参数p，它是请求该接口时携带的参数对象。另一个url就是我们请求接口的地址。

这样，我们就写好了一个api接口了，接下来就是在页面方法中引用。

//login.vue
import {login} from '@/request/api';

export default {
	name: 'login',
	methods: {
		onLogin() {
			login({
					userName: 123,
					passWord: xxxx,
			}).then(res = > {
				console.log(res)
			})
		}
	}
}

以上就是最基本的axios封装啦～～～～～