axios.create方法

axios create(config)
a.根据指定配置创建一个新的 axios,也就是每个新 axios都有自己的配置
 b.新 axios只是没有取消请求和批量发请求的方法,其它所有语法都是一政的
 c.为什么要设计这个语法?


 需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,如何处理
 解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同变求的接口请求中
    那么问题来了,直接使用axios就可以发送请求了,我为什么还要再创建axios:
    假如同一个项目,你要从不同的url地址来请求接口怎么办?
        url地址1:http://localhost:3000
        url地址2:http://localhost:3002
        url地址3:http://localhost:3003
    这个时候你创建多个不同的axios,是不是就可以轻松解决。
 


import axios from 'axios';


let baseURL= '';
if(process.env.NODE_ENV=='development'){
    baseURL = ''
}else{
    baseURL = ''
}

 
 
const $http = axios.create({
    baseURL,
})
// create 是axios自带的方法
//$http拥有axios的get和post方法

 // 添加请求拦截器,在请求头中加token
$http.interceptors.request.use(

    config => {
    //   console.log(this.$store.state.user.Authorization);
      if (sessionStorage.getItem('Authorization')) {
        config.headers.token = sessionStorage.getItem('Authorization');
      }
      // if (this.$store.state.user.Authorization) {//去vuex全局作用域找
      //   config.headers.token = store.state.user.Authorization;
      // }
      return config;
    },
    error => {
      return Promise.reject(error);
});

//在 response 拦截器实现
$http.interceptors.response.use(
    res => {
      const status = res.data.code;
      //如果是未登录
      if(status==401 || status=="401"){
        app.$alert('登录已超时,请重新登录', '提示', {
          confirmButtonText: '确定',
          type:'warning',
          closeOnClickModal:false,
          callback: action => {
            app.$router.push('/login');
            return;
          }
        });
      }
      // if(status=='10010'){
      //   app.$router.push('/login');
  
      //   //window.location.href="http://localhost:8080";
      // }
      return res;
    }, error => {
      return Promise.reject(error);
  });


export const get = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        // axiso 自带 get 和 post 方法
        $http.get(url,{
            params,
        }).then(res=>{
            resolve(res.data);
            if(res.data.code==200){
                
            }else{
                // alert(res.data.msg)
            }
        }).catch(error=>{
            alert('网络异常!');
        })
    })
}
 
export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg);
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

猜你喜欢

转载自blog.csdn.net/qq_26695613/article/details/126464738