axios

发表于 | 更新于

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

  1. 执行 GET 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    // 上面的请求也可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

  2. 执行 POST 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

  3. 全局的 axios 默认值

    1
    2
    3
    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

  4. 自定义实例默认值

    1
    2
    3
    4
    5
    6
    7
    // 创建实例时设置配置的默认值
    var instance = axios.create({
      baseURL: 'https://api.example.com'
    });

    // 在实例已创建后修改默认值
    instance.defaults.headers.common['Authorization'] = localStorage.getItem("token");

  5. 添加Token：token是客户端频繁向服务器端请求数据，服务器频繁的去数据库查询用户名和密码进行对比，判断用户名和密码正确与否，并作出相应的提示，在这样的背景下，token便应运而生了。

    • 登录后接口返回token，并使用localStorage保存token
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      	var ecpkey = genrKey(timestamp, num, options.url);
           	return new Promise((resolve, reject) => {
               const instance = axios.create({ //instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
                   //所有的请求都会带上这些配置，比如全局都要用的身份信息等。
                   headers: {
                       'Content-Type': 'application/x-www-form-urlencoded',
                       'timestamp': timestamp + "-" + num,
                       'ecpkey': ecpkey,
                       'token': localStorage.getItem("token")
                   },
                   //后面数组中的函数必须返回一个字符串
                   transformRequest: [function (data) {
                       return Qs.stringify(data);
                   }]
               });
               instance(options)
                   .then(response => { //then 请求成功之后进行什么操作
                       if (response.status === 200) {
                           if (response.data.accCheck === "1") {
                               localStorage.clear();
                               sessionStorage.clear();
                               store.commit('login', false);
                               router.push({
                                   path: '/'
                               });
                           }

                           resolve(response); //把请求到的数据发到引用请求的地方
                       }
                   })
                   .catch(err => {
                       if(options.url=='/user/logout'){
                           localStorage.clear();
                           sessionStorage.clear();
                           router.push({
                               path:"/"
                           })
                       }
                   })
           });
       }
      、