一、什么是axios?

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

二、特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

三、安装使用

1.安装

 npm install axios

2.调用

import Axios from 'axios';

三、post请求和get请求

1.登录帐号post请求

      import Axios from 'axios';
      // url地址
      Axios.post("http://it.warmtel.com/api/login", {
        //用户名和密码
        username: userName,
        password: passWord
      })
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log("网络出错" + err);
        });

2.获取数据get请求

import Axios from "axios";

Axios.get('http://it.warmtel.com/api/find',{
      params:{
        id: 5
      }
    }).then(res=>{
      console.log(res.data);
    }).catch(err=>{
      alert(err);
    })

3.直接使用Axios对象通用方式去请求数据

（1）get请求

• 注意：在get请求某一条数据的时候，params的作用是将请求的某一条数据的属性id，拼接到url地址后面，如下：http://it.warmtel.com/api/find?id=1

Axios({
      url: "http://it.warmtel.com/api/find",
      method: "get",
      // params的作用是将id值拼接到url地址后面： http://it.warmtel.com/api/find?id=1
      params: {
        id: 5
      }
    }) .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });

（2）post请求

Axios({
        url: "http://it.warmtel.com/api/login",
        method: "post",
        data: {
          username,
          password
        }
      }).then(res=>{
        console.log(res.data);
        const data = res.data;
        // 业务逻辑，对状态码resultCode进行判断
        if(data.resultCode == 1){
        // 路由跳转
          this.$router.replace({ path: "/main" });
        }else{
          this.message = data.resultInfo;
        }
      }).catch(err => {
        console.log(err);
      })

4.对axios的封装

（1）创建api文件夹，里面存放请求数据的js模块

（2）创建request.js文件，对axios实例的封装

import Axios from 'axios';

// 创建一个axios实例,封装
const instance = Axios.create({
    baseURL: 'http://it.warmtel.com',
    timeout: 1000
})

// 暴露出去
export default instance;

（3）创建IndexApi.js文件，对请求某个网络数据的封装

// 引用axios实例示例
import instance from '@/api/request.js';

/** 登录接口API */
const RequestLogin = (username, password) => {
    return instance({
        url: '/api/login',
        method: 'post',
        data: {
            username,
            password
        }
    })
}

// 将封装的登录接口的方法暴露出去
export { RequestLogin }

（6）登录页面请求数据

// 引用封装的RequestLogin方法
import { RequestLogin } from "@/api/IndexApi.js";

// 有参数输入参数
RequestLogin(userName, passWord)
        .then(res => {
          console.log(res.data);
          const data = res.data;
          if (data.resultCode === 1) {
            localStorage.setItem('loginUserState', userName);
            this.$router.replace({ path: "/main" });
          } else {
            this.message = data.resultInfo;
          }
        })
        .catch(err => {
          console.log(err);
        });

（5）备注：

对模块进行暴露时，有两种方式，不同的暴露方式，引用的方式也不一样

// 暴露出去
 export { RequestLogin }

// 引用
import { RequestLogin } from "@/api/IndexApi.js";

// 暴露出去
export default RequestUser;

// 引用
import RequestUser from "@/api/UserApi.js";

四、拦截器

1.什么是拦截器

• 拦截器是客户端在请求数据时候，可以去截取数据并处理数据，
• 在请求或响应被 then 或 catch 处理前拦截它们。
• 拦截器里面去进行token令牌验证

2.token令牌

• token令牌就是一个字符串

• 为了避免某些伪造的客户端去请求服务器的数据，便有了token令牌

• token令牌在数据请求的过程中去进行校验

• 第一次请求的时候，服务器或返回一个token令牌到客户端，然后后期客户端再次请求数据的时候，会把token令牌发送到服务器，服务器会对token令牌进行校验判断

  
  

• 拦截器放在这里的request.js模块文件中

（1）请求拦截器

1.在请求数据成功的时候，写入以下代码

• localStorage对象对本地数据的存储
• res.data的token值为令牌，进行请求数据权限检测的
• 将token的值存储在本地，设置属性值为token

localStorage.setItem('token', res.data.token);

2.在请求拦截器中去取到token值

• 取出存在本地的token值
• 设置token到请求头，发送到服务端

import Axios from 'axios';

// 创建一个axios实例,封装
const instance = Axios.create({
    baseURL: 'http://it.warmtel.com',
    timeout: 1000
})

//  instance为创建的axios实例
instance.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    console.log('请求拦截器', config);
    // 设置token到请求头，发送到服务端
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.common.Authorization = token;
    }
    // 这里必须返回config,这样请求才能正常往下请求数据
    return config;
}, (err) => {
    // 请求错误做些什么
    return Promise.reject(err);
})

// 暴露出去
export default instance;

3. token值设置成功

   
   

（2）响应拦截器

instance.interceptors.response.use((config) => {
    // 响应做些什么
    console.log('响应拦截器 ', config);
    return config;
}, (err) => {
    // 对响应错误做些什么
    return Promise.reject(err);
})