欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue axios简单配置

程序员文章站 2022-07-02 16:54:21
...

1.项目目录下引入npm install axios -S

2.vue的入口文件main.js里面

//axios全局配置
const Axios = axios.create({
  //请求接口
  baseURL:"199.166.1.1:8080/api",
  //超时设置
  timeout:8000,
  //请求头设置
  headers: {
        "accept": "application/json",
        'Content-Type': 'application/json',
  }
})
// 在发送请求之前做些什么("请求拦截器")
instance.interceptors.request.use(config => {
        //假设接口需要对接token,可以用store保存token,在拦截器中设置到header中
        //store需要安装、引入
    if(store.state.Config.token){
        config.headers.common['Authorization'] = store.state.Config.token
    }else{
        config.headers.common['Authorization'] = store.state.Config.machine
    }
    return config;
    }, error => {
    // 对请求错误做些什么
    //console.log(error)
});
//respone拦截器==>对响应做处理
instance.interceptors.response.use(
    response => {  //成功请求到数据
        if(response.data.statusCode==200){
        return response.data.data
    }else{
                return "请求错误"
    }
    },
    error => {  //响应错误处理
             if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
                 let originalRequest = error.config;
                 return "error"
                 //return instance.request(originalRequest);//例如再重复请求一次 
                }
    }
);
//将axios挂载到Vue的原型上
Vue.prototype.$http = instance

3.使用时:

//vue的生命周期
created(){
  let that = this;
  that.$http.get("url?name="+"gaofei").then(data=>{
    console.log(data)
  })
}

转载于:https://www.jianshu.com/p/c0877da93d28