关于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=>{
//处理错误
});
}
}
针对返回的错误处理 可以添加响应拦截器 也可以分开处理 这个根据实际需要使用
以上是具体我在项目中的使用
也有一些更好的方法 欢迎留言讨论