关于axios的使用

关于axios 我在项目上的使用 做个记录
由于项目上的请求一般不止一个 不可能每个请求的地方都直接用axios做请求 否则一旦请求地址变动 会导致整个项目到处需要修改请求地址
所以一般的做法是将请求独立出来 放在一个独立的文件中便于修改
以下针对常见的axios请求做个封装

//需要先安装axios 然后引入
import axios from 'axios';
export const httpRequest(_url='',_data={},_type='GET'){//此处是ES6的写法 给参数设默认值
	//这个方法最终会返回一个Promise对象
	return new Promise((resolve,reject)=>{
		let Promise;
		if(_type==='GET'){
			Promise = axios({
				method:"get",
				url:_url,
				data:_data,
				withCredentials:true   //get请求 带cookie  不需要带cookie的也可以设置为false
			})
		}else{//post请求
			Promise = axios({
				method:"post",
				url:_url,
				data:_data,
				withCredentials:false //post请求 不带cookie  根据实际项目需要可以修改设置
			});
		}
		Promise.then(response=>{
			if(response){
				resolve(response.data);
			}else{
				resolve({"message":"nodata"});//可以修改
			}
		}).catch(error=>{
			reject(error);
		})		
	})
}

//根据实际需要 可以添加拦截器 具体根据项目需要来设置

// 添加请求拦截器
axios.interceptors.request.use(config => {//config对应的是请求的传参
  // 在发送请求之前做些什么
  //.....  
}, function (error) {
  // 对请求错误做些什么
  //.....  
  return Promise.reject(error);
});
// 添加响应拦截器
ajax.interceptors.response.use(response => {//response就是响应的数据
  return response.data;
}, error => {
  // 对响应错误做点什么
  //.....  
  return Promise.resolve(error.response);
})

以上文件命名为config.js 封装的是请求方法
然后将所有的请求都封装在一个请求配置文件中,用做请求配置 命名为requestConfig.js

//引入
import {httpRequest} from './config';
//登录
export const login = (username, password) => httpRequest('/api/login', {
    username,
    password
});
//获取用户信息
export const getUserInfo =(userId)=>httpRequest('/api/getUserInfo',{userId});
//其他请求配置

实际页面上使用的时候 ：

import {login,getUserInfo} from 'xxx/js/requestConfig'//具体路径根据实际来
//省略部分无关逻辑
methods:{
	//页面上点击去登录的方法
	logonUser(){
		login(username,password).then(res=>{//登录请求
			//处理请求结果
		}).catch(err=>{
			//处理错误
		});
	},
	//页面上去获取用户信息的方法调用
	getUser(userId){
		getUserInfo(userId).then(res=>{//获取用户信息请求
			//处理请求结果
		}).catch(err=>{
			//处理错误
		});
	}
}

针对返回的错误处理 可以添加响应拦截器 也可以分开处理 这个根据实际需要使用
以上是具体我在项目中的使用
也有一些更好的方法 欢迎留言讨论