基于promise封装axios请求

133 阅读1分钟

废话不多说,因为项目中重复不断的使用axios,代码冗余,维护起来不方便,这些天搜集阅读一些资料文档,封装axios的get与post请求,如有不足之处,请指正!!!直接上代码。

//一、
// 创建request.js文件配置axios
import axios from 'axios'
const baseUrl ='http://localhost:8080'
//请求拦截,会自动在axios请求后端的时候添加请求头,并将token添加到请求里面
const service = axios.interceptors.request.use(config => {
    // if (localStorage.getItem('token')) {
    //     config.headers.token = localStorage.getItem('token');
    // }
    return config;
}, error => { return Promise.reject(error) })
 
//响应拦截
axios.interceptors.response.use(
  (response) => {
    // Do something before response is sent
    const status = response.data.code;
    const msg = response.data.msg;
    if (status === 401) {
      alert(msg)
      router.push({ name: "Index" })
    } else if (status === 405){
      Message({
        showClose: true,
        message: '这是一条警告消息',
        type: 'warning'
      });
    }
    return response;
  },
  (error) => {
    // Do something with response error
    return Promise.reject(error);
  }
);
 
export default service
//二、
//创建http.js封装axios
import service from './request'
const AliHttp = payload =>{
  return new Promise((resolve,reject)=>{
    service({
      url:payload.url,
      method:payload.method || 'GET',
      data:payload.data || {},
      params:payload.params || {}
    }).then(res=>resolve())//请求成功
      .catch(err=>reject(err))//请求失败
  })
}
export default AliHttp

//三、 app中使用全局注册
import AliHttp from './utils/http.js'
Vue.prototype.$AliHttp = AliHttp
// get请求不带参数获取数据
async getdata(){
  const Rres = await AliHttp({url:'/getdata'})
}
// get请求携带参数获取数据
async getparas(){
  let params = {id:10}
  const Rres = await AliHttp({url:'/dwad',params})
}
// post请求获取数据
async postdata(){
  let obj = {a:1}
  let Rres = await AliHttp({url:'/login',method:'POST',data:obj})
}