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封装啦~~~~~

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐