vue项目中axios封装api请求方式一

一，首先安装引入axios

1.安装axios (详细的可点击官网查看)

使用npm安装

npm install --save axios
cnpm install --save axios （推荐）

2.main.js中引入

一般都在main.js中引入，其他地方需要使用，同理。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二，在src目录下，创建network目录，新建request.js和api.js文件

1.request.js文件

注：注释代码为根据实际需求添加使用，其他注释 Message.error 为ui框架提示信息，

import axios from 'axios';
// 统一请求地址
axios.defaults.baseURL = 'https://api-hmugo-web.itheima.net/api/public/v1'
// 超时设定
axios.defaults.timeOut = 3000;

//request 请求拦截
axios.interceptors.request.use(config => {
    return config;
}, err => {
    // Message.error('请求超时');
    alert('请求超时')
    return Promise.resolve(err);
});

// http response 拦截器
axios.interceptors.response.use(response => {
    const data = response.data;
    // 根据返回的code值来做不同的处理(和后端约定)
    switch (data.code) {
        case 401:
            // 未登录 清除已登录状态
			alert('未登录 清除已登录状态')
            // Cookies.set('userInfo', '');
            // setStore('accessToken', '');
            // router.push('/login');
            break;
        case 403:
            // 没有权限
			alert('没有权限')
            // if (data.message !== null) {
            //     Message.error(data.message);
            // } else {
            //     Message.error("未知错误");
            // }
            break;
        case 500:
            // 错误
			alert('错误')
            // if (data.message !== null) {
            //     Message.error(data.message);
            // } else {
            //     Message.error("未知错误");
            // }
            break;
        default:
            return data;
    }

    return data;
}, (err) => {
    // 返回状态码不为200时候的错误处理
    // Message.error(err.toString());
    return Promise.resolve(err);
});

export const getRequest = (url, params) => {
    // let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: url,
        params: params,
        // headers: {
        //     'accessToken': accessToken
        // }
    });
};

export const postRequest = (url, params) => {
    // let accessToken = getStore("accessToken");
    return axios({
        method: 'post',
        url: url,
        data: params,
        // headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded',
        //     'accessToken': accessToken
        // }
    });
};

2.api.js 文件

// 发送请求面对api.js即可 便于维护
import {
  getRequest,
  postRequest,
} from '@/network/request';

//get请求 
export const getSelect = (params) => {
  return getRequest(params.url, params.data)
}
//post请求 
export const postSelect = (params) => {
  return postRequest(params.url, params.data)
}

三，组件使用请求api接口

使用封装axios请求

<template>
  <div class="home">
  	//轮播组件代码...
  </div>
</template>

<script>
//引入请求api接口
import { getSelect } from "@/network/api";

export default {
  name: 'Home',
  components: {},
	methods: {
		init() {
			this.getSwiperInfo()
		},
		// 发送请求
		getSwiperInfo() {
			getSelect({
				url: '/home/swiperdata',
				data: {}
			}).then(res => {
				// 获取请求结果
				console.log(res);
			})
		}
		
	},
	mounted() {
		this.init()
	}
}
</script>