zoukankan      html  css  js  c++  java
  • ③ 如何在vue中请求第三方数据--axios

    1 axios -> 基于Promise对象 -> async & await

    2 create阶段 -> 返回Promise对象 -> 返回的数据可以直接解构【数据处理】

    • 要写入实例的数据(即页面渲染使用的数据),需要用配置参数data接收

    3 import axios from 'axios';

    4 多次导入、使用的axios -> 将axios放在原型链上

    import axios from 'axios';
    Vue.prototype.axios = axios;
    

    5 请求方法的别名

    • axios.request(config)

    • axios.get(url[, config])

    • axios.delete(url[, config])

    • axios.head(url[, config])

    • axios.options(url[, config])

    • axios.post(url[, data[, config]])

    • axios.put(url[, data[, config]])

    • axios.patch(url[, data[, config]])

    6 拦截器

    // 添加请求拦截器
    axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      return config;
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(response => {
      // 对响应数据做点什么
      return response;
    }, error => {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    

    6.1 请求拦截应用

    axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      let token = sessionStorage.getItem('userTk');
      if (token) {
        config.headers.Authorization = token
      }
      return config
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    

    6.2 响应拦截应用

    axios.interceptors.response.use(response => {
      if (response.data.code === '200') {
        Auth.setToken(sessionStorage.getItem('userId'))
      }
      return response;
    },
    error => {
      console.warn(error);
      console.warn(error.response);
      if ((error.response.status && error.response.status === 401) || error.response.statusCode === 401) {
        // 已超时
        Auth.removeToken(sessionStorage.getItem('userId'));
        sessionStorage.clear();
        router.replace('/login')
        return Promise.reject('身份已过期,请重新登录!');
      }
      if(error.response && error.response.status === 500)
      return Promise.reject('服务异常,请稍后重试!');
    });
    
  • 相关阅读:
    C 语言高效编程的几招——A few action of efficient C language programming
    UDP套接字——(DGRAM)
    初学数位DP--hdu 2089
    leetcode Reverse Nodes in k-Group
    CC+语言 struct 深层探索——CC + language struct deep exploration
    [置顶] JDK工具(一)–Java编译器javac
    非归档数据文件offline的恢复
    [置顶] OpenJDK源码研究笔记(九)-可恨却又可亲的的异常(NullPointerException)
    MSF溢出实战教程
    一些安全名词解释
  • 原文地址:https://www.cnblogs.com/pleaseAnswer/p/14073274.html
Copyright © 2011-2022 走看看