位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 拦截器
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 配置的优先顺序 下一篇: 取消

在请求或响应被 then catch 处理前拦截它们。

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

 

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

    // 对响应数据做点什么

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

如果你想在稍后移除拦截器,可以这样:

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器。

var instance = axios.create();

instance.interceptors.request.use(function () {/*...*/});

错误处理:

axios.get('/user/12345')

  .catch(function (error) {

    if (error.response) {

      // 请求已发出,但服务器响应的状态码不在 2xx 范围内

      console.log(error.response.data);

      console.log(error.response.status);

      console.log(error.response.headers);

    } else {

      // Something happened in setting up the request that triggered an Error

      console.log('Error', error.message);

    }

    console.log(error.config);

  });

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {

  validateStatus: function (status) {

    return status < 500; // 状态码在大于或等于500时才会 reject

  }

})

 


上一篇: 配置的优先顺序 下一篇: 取消
毕业设计网             广告联系QQ:45157718(微信同号)