[JavaScript知识库]vue 封装 axiso

1. 安装 axios

npm install axios --save

2. 封装 axios get/post 请求

?在src 目录下新建目录 netwok, 在目录下新建 request.js文件

import axios from 'axios'; // 引入axios

const baseUrl = '/api';

const service = axios.create({
	baseURL: baseUrl, // 请求根路径
	withCredentials: false, //
	timeout: 1000*12 // 请求超时
});


// 2.请求拦截器
service.interceptors.request.use(config => {
	//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
	// //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
	// const token = getCookie('Admin-Token'); //这里取token之前，需要先拿到token,存一下
	// if (token) {
	//     // config.params = { 'token': token } //如果要求携带在参数中
	//     // config.headers.Authorization = '5fb94a47-0904-4368-819f-0d0c7f534a6a'; //如果要求携带在请求头中
	//     config.headers.Authorization = token; //如果要求携带在请求头中
	// }
	return config;
}, error => {
	return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(
	response => {
		if (response && response.data) {
			let data = response.data || {};
			if (data && (data['code'] === "201")) {

			}
		}
		return response
	},
	err => {
		console.error('axios response 请求出错：', err);
		let res = {
			success: false,
			message: '系统错误，请重试！'
		};
		return Promise.resolve(res)
	}
);


export default service;

3. 解决跨域问题

在项目根目录下新建 vue.config.js 文件

const proxyObj = {};
const targetURL = "http://localhost:8091";

// 跨域配置
proxyObj['/api'] = {
	ws: false,
	target: targetURL,    // 请求转发后的请求地址
	changeOrigin: true,
	pathRewrite: {
		'^/api': ''
	}
};

module.exports = {
	configureWebpack: {
		resolve: {
			extensions: ['.js', '.vue', '.json', '.css'],
			alias: {
				'assets': '@/assets',
				'components': '@/components',
				'views': '@/views',
				'network': '@/network'
			}
		}
	},

	devServer: {
		host: "localhost",
		port: 8080,
		proxy: proxyObj
	}

};

4. 使用

4.1 创建 test.js 文件, 这个文件用来编写网络请求的逻辑

import request from '../request';

/**
 *
 * @param params
 * @returns {AxiosPromise}
 */
export function testSavePost(params) {
	return request({
		method: 'post',
		url: '/demo/test1',
		data: params
	});
}


export function testSaveGet(params) {
	return request({
		method: 'get',
		url: '/demo/test1',
		params
	});
}

4.2 在组件中使用

<template>
  <div>
    <h1>测试1</h1>
    <button @click="hanleSubmit">测试提交</button>
  </div>
</template>

<script>
	import {testSavePost, testSaveGet} from "../network/Test1/test1";
	export default {
		name: "Test1",
    methods: {
			hanleSubmit() {
				const params = {
					name: 'zs',
          age: 19,
          hobby: ['足球', '篮球', 'pingpong']
        };
				testSavePost(params).then(res => {
					console.log(res);
				})
      }
    }
	}
</script>

<style scoped>

</style>