axios封装

1.初始化VUE项目

#使用脚手架创建项目  
vue init webpack deaxios   
#进入项目
cd deaxios
#安装axios
cnpm install axios -S

2.封装axios

2.1 src 文件夹下新建http 文件夹，用来放网络请求相关的文件

2.2 src/http 文件夹下，创建 index.js 文件，对axios 进行封装

/* eslint-disable */
const { data } = require('autoprefixer');
const axios = require('axios');
const { error } = require('shelljs');

axios.defaults.baseURL = 'http://192.168.56.100:8888' //vue请求后端地址

axios.defaults.timeout = 10000; // 超时设置

axios.defaults.withCredentials = true; // 跨域访问需要发送cookie时，一定要加上


axios.defaults.headers['Content-Type'] = 'application/json'; //设置默认提交json
axios.defaults.transformRequest = data => JSON.stringify(data);//把数据对象序列化成json字符串


// 对请求拦截器，和响应拦截器进行封装

/*
请求拦截器，发送请求前需要调用这个函数
当没有登录时，直接跳转到登录页
请求发送前把token获取，设置到header中
*/

axios.interceptors.request.use(config=>{
    //从localStorage中获取token
    let token = localStorage.getItem('token');
    // 如果有token，就把token设置到请求头中Authorization字段中
    token && (config.headers.Authorzation = token);
    return config;
},error => {
    return Promise.reject(error)
});

/*
响应拦截器，当后端返回数据给vue时，会调用这个函数

每次返回403错误时，跳转到login
*/
axios.interceptors.response.use(response =>{
    //当响应码是2xx的情况时，进入这里
    return response.data;
},error =>{
    //当响应码不是2xx的情况是，进入这里
    return error
});

//使用上面的axios对象，对get和post请求进行封装

/*
get方法，对应get请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]
*/

export function get(url,params,headers){
    return new Promise((resolve,reject) =>{
        axios.get(url,{params,headers}).then(res=>{
            resolve(res.data.ResulObj)
        }).catch(err =>{
            reject(err.data)
        })
    })
}

/*
post方法，对应post请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]
*/
export function post(url,params,headers){
    return new Promise((resolve,reject) =>{
        axios.post(url,params,headers).then(res=>{
            resolve(res.data)
        }).catch(err =>{
            reject(err.data)
        })
    })
}

//一定要导出函数
export default axios;

2.3 ser/http 目录下创建 apis.js文件，用来写接口地址列表

/* eslint-disable */
//接口信息，生成请求方法
//引入 GET方法 ，POST方法
import {get,post} from './index'

//用户登录

export  const  login = (params,headers)=>post('/user/login/',params,headers)

3.创建一个Login.vue页面

3.1写页面 components/Login.vue

<template> 
	<div> 测试axios-{{title}} </div> 
</template>


<script> 
	import { login } from '@/http/apis'; 
	export default { 
        data() { 
            return { 
                title: '测试axios', 
            } 
        },
        mounted() { 
        },
        methods: { 
            
        } 
    } 
</script> 
<style scoped> 
    
</style>

3.2 src/router/index.js 中配置vue路由

import Login from '@/components/Login'
export default new Router({
routes: [ 
	{ path: '/login', name: 'Login', component: Login }, 
	] 
})

4在Login.vue页面中使用axios发送请求

4.1src\http\apis.js 中配置后端接口调用请求

/* eslint-disable */ 
// 接口信息, 生成请求方法 
// 引入 get方法, post方法 
import { get, post } from './index' 

// 用户登录 
export const login = (params, headers) => post("/user/login/",params
, headers)

4.2在 Login.vue 页面中导入模块并测试与django联通

<template> 
	<div> 
		测试axios-{{title}} 
		<button @click="requetLogin">登录</button> 
	</div> 
</template> 
<script> 
	import { login } from '@/http/apis'; 
	// @符号指的是src路径 
	export default { 
		// vue页面中双向绑定数据 
		data() { 
			return { 
				title: '测试axios', 
			} 
		},
			// vue生命周期中挂在的函数 
		mounted() { 
			
		},
		methods: { 
			requetLogin() { 
				// 获取小节的内容 
				let data = { name: 'zhangsan', pwd: '123456' } 
				login(data).then((resp) => { 
					// resp: django后端返回的数据 
					console.log(resp); 
				}).catch((err) => { 
					console.log(err); 
				});
			}, 
		} 
	} 
</script> 

<style scoped> 

</style>

点击登录按钮，出发请求，成功登录，并返回django后端信息