axios.create method

axios create(config)
a. Create a new axios according to the specified configuration, that is, each new axios has its own configuration
 b. The new axios only has no method of canceling requests and sending requests in batches, and all other syntaxes are the same.
 c. Why design this grammar?


 Requirements: Some interfaces in the project require different configurations than other interfaces. How to solve the problem
 : Create 2 new axios, each with its own unique configuration, and apply them to different interface requests.
    So here comes the question. You can send requests directly using axios. Why should I create axios again:
    What if you want to request the interface from different URL addresses for the same project?
        URL address 1: http://localhost:3000
        URL address 2: http://localhost:3002
        URL address 3: http://localhost:3003
    At this time, if you create multiple different axios, can it be easily solved?
 


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('网络异常');
        })
    })
}

Guess you like

Origin blog.csdn.net/qq_26695613/article/details/126464738