2021-01-01

vue中axios封装

vue-axios是VUE框架中的一个网络请求的插件非常好用,这里我封装到一个函数中,便于以后的使用

• 首先安装插件

npm install axios -s

• 开始封装
• 为了以后复用,我把关于axios网络请求的内容封装在一个axios的文件夹里(专门用于网络请求)

//引入vue和axios
import axios from axios
//导出
exprot  function request(config) {
//创建一个实列 
	let instance = axios.create({
		baseURL:127.0.0.1,
		timeout:5000
		....
		....
		
	})
	// 1.请求拦截
    instance.interceptors.request.use(config => {
       //config中的内容不符合服务器需求
       //希望在界面中显示动画
       // console.log(config);
       return config
    }, err => {
        console.log(err);
    })
    // 2.响应拦截
    instance.interceptors.response.use(res => {
       // console.log(res);
       // console.log(res.data);
       return res
    }, err => {
        console.log(err);
    })
	return instance(config)
}

• 封装完成在其他地方的使用

improt {requset} from './request'

//这里又进行了一次封装,一个函数把request()导出

export function getHomeMultidata() {
    return request({
        url: '/home/multidata',
        //想服务器发送的参数
        params: {
            type: 'pop',
            page: 1
        }
    })
}
//其他页面只要导入这个,并调用就直接可以发送网络请求,并可以通过 .then()的方式拿到请求数据 例如: import {getHomeMultidata} from '........' 
getHomeMultidata().then( res => consloe.log(res))