Vue中axios的封装

Axios

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

一. 安装

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

二. 引入

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

在这里插入代码片
import QS from 'qs';//引入qs模块，为post型数据提供序列化（非常重要）
import { Toast } from 'vant';
// qs把对象转换为url编码形式
const BASEURL = process.env.NODE_ENV==='production'?'https://www.520mg.com/':'http://localhost:8080';
// process.env.NODE_ENV 当前的运行环境是production
// process 处理 env环境 node NodeJS  env 环境
// 当前的运行环境如果是线上 采用域名 https://www.520mg.com 作为所有请求的默认域名，如果开发环境则设置另外一个  

// 创建一个axios实例

let request = axios.create({
	baseURL:BASEURL, //基础url
	timeout:3000,//请求超时
})

# 设置请求超时
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()方法

首先是get方法的封装，封装方式如下：
//axios请求方式有很多种，这里主要是用get和post

在这里插入代码片
//get函数有两个参数。第一个参数代表的是我们要请求的url地址，第二个参数代表的是请求该url时携带的请求参数。接下来是get请求返回的promise对象，成功时返回resolve，失败时返回reject。
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)        
    })    
});

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

六. axios的基本封装完成，进行使用

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

//api.js
import {get, post} from './http.js';
//定义了一个login方法，这个方法有一个参数p，它是请求该接口时携带的参数对象。另一个url就是我们请求接口的地址。
export const login = p => post('http://www.xxxx.com/api/', p)

然后在页面进行引用

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

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

二次封装的作用：

api统一管理，不管接口有多少，所有的接口都可以非常清晰，容易维护。

1. 统一配置http请求baseURL，超时配置，请求头配置
2. 可以劫持劫持响应，劫持请求，添加全局加载提示，添加header鉴权，响应式错误统一处理
3. 扩展简化axios方法jsonp，postURL

通常来说在项目开发中有三个阶段：
1、开发环境
2、测试环境
3、生产环境

不同环境访问接口的域名是不同的，直接修改域名，这就是封装请求的原因。