【Axios实战】

---

一、什么是axios？

    是一个异步请求技术, 基于promise对ajax的一种封装, 本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范.

特点:
    在浏览器端使用axios可以发送ajax请求获取数据. 在浏览器通过XMLHttpRequest发送请求.
    在nodejs环境运行,向远端服务发送http请求.
    支持Promise的相关操作.
    请求响应拦截器: 在请求之前做一些准备工作, 在响应回来之后对结果做一些预处理.
    自动将结果转换为json类型数据, 备axios异步请求的特点: 请求之后页面不会刷新, 响应回来更新的是页面的局部, 多个请求之间互不影响, 并行执行

二、安装axios

npm方式

$ npm install axios

CDN

# unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
# jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2.1) axios基本使用
发送无参、有参get + post, 标准格式

<script>
       // axios( { method: 'xx', url: url } )
       // 不带参数的get请求
       // 不写method, 默认是get请求
       axios({
           method: 'get',
           url: 'http://localhost:50000/stu/getAllStu'
       }).then((res)=>{    // then 请求成功之后的回调
           console.log(res.data);
       }).catch((err)=>{  //  catch 请求失败的回调
           console.log(err);
       })

       // 有参get方式, 参数配置化方式
       axios({
           method: 'get',
           url: 'http://localhost:50000/stu/getStuById',
           params: {
               id: '1',
               name: '张三'
           }
       }).then((res)=>{
            console.log(res.data);
       })

      // 无参post请求
      axios({
          method: 'post',
          url: 'http://localhost:50000/stu/postAllStu'
      }).then((res)=>{
            console.log(res.data);
      }).catch((err)=>{
         console.log(err);
      })
       
      // 有参post请求, 使用data, 传递的参数默认是application/json的格式,所以后台需要降axios自动封装的
      // json数据转换为java对象, 使用@RequestBody 接受一个对象参数
      // 如果请求到后端接受的参数是类似于一个字符串的形式, 可以使用params传递
      axios({
          method: 'post',
          url: 'http://localhost:50000/stu/postArgsStu',
          data: {
            user: user
          }
      }).then((res)=>{
        console.log(res.data);
      }) 
    </script>

2.2) axios发送并发请求
axios.all() 发起并发请求，参数是一个请求数组

  axios.all([
            axios({
                method: 'get',
                url: 'http://localhost:50000/stu/getAllStu'
            }),
            axios({
                method: 'get',
                url: 'http://localhost:50000/stu/getStuById',
                params: {
                    id: '1'
                }
            })
        ]).then(res =>{
            console.log(res);
        })

2.3) axios全局配置

<script>
        // 默认请求路径信息
        axios.defaults.baseURL='http://localhost:50000/stu';
        // 默认超时时间 毫秒
        axios.defaults.timeout=5000;  

        axios({
            method: 'get',
            url: '/getAllStu'
        }).then(res=>{
            console.log(res.data);
        })
    </script>

2.4) axios实例
    如上我们导入的axios是默认实例, 当对该实例做全局配置后, 所有通过axios发起的请求都是以上的配置, 当遇到需要不同的请求资源时, 就需要多种配置的axios实例

 <script>
        // 创建一个axios实例, 配置url、超时时间
        // 只有使用该实例,其配置才生效
        let request1 = axios.create({
            baseURL: 'http://localhost:50000/stu',
            timeout: 5000
        });
        // 可以创建多个不同配置的axios实例
        let request2 = axios.create({
            baseURL: 'http://localhost:40000/stu',
            timeout: 500
        });

        request1({
            method: 'get',
            url: 'getAllStu'
        }).then(res=>{
            console.log(res.data);
        })
    </script>

2.5) axios拦截器
    axios提供了两种拦截器, 请求拦截器 和 响应拦截器
     请求拦截器: 在请求发送前进行的操作, 比如添加统一cookie、请求体加验证、设置请求头等, 相当于对每个接口里相同操作的封装
    响应拦截器: 也是如此功能, 只是在得到响应之后, 对响应体的一些处理. 通常是数据统一处理, 也常用来判断登陆失效等
请求拦截器: axios.interceptors.request.use()

    <script> 
        axios.interceptors.request.use(config=>{
            console.log('进入请求拦截器');
            return config; // 拦截后请求放行
            console.log('===============================');
        }, err=>{
            console.log("进入请求失败拦截器");
            console.log(err);
        });


        axios({
            method: 'get',
            url:'http://localhost:50000/stu/getAllStu'
        }).then(res=>{
            console.log(res.data);
        })
    </script>

响应拦截器: axios.interceptors.response.use()

 axios.interceptors.response.use(config=>{
            console.log('进入响应拦截器');
            console.log(config.data);  // config.data可以获取响应的数据
            return config; // 拦截后请求放行
            console.log('===============================');
        }, err=>{
            console.log("进入响应失败拦截器");
            console.log(err);
        });


        axios({
            method: 'get',
            url:'http://localhost:50000/stu/getAllStu'
        }).then(res=>{
            console.log(res.data);
        })

三、axios在Vue中封装

3.1) 在vue create demo 脚手架生成项目后, 在main.js中导入axios, 并测试是否可用

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

axios({
  method:'get',
  url: 'http://localhost:50000/stu/getAllStu'
}).then(res=>{
  console.log(res);
})

测试成功后, 在src下新建request.js, 封装axios , config.js封装ip
config.js

export const serverIp = 'localhost'

封装request.js

import axios from 'axios'
import ElementUI  from 'element-ui';
import router from '@/router';
import {serverIp} from './config'

const request = axios.create({
    // baseURL: 'http://localhost:10000',
    baseURL: `http://${serverIp}:10000`,
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null
    if (user != null){
        config.headers['token'] = user.token;  // 设置请求头
    }
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        // 当权限验证不通过, 给出提示
        if (res.code === '10003'){
            ElementUI.Message.error({
                message: res.msg,
                type: 'error'
            })
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

在main.js中导入

import request from './utils/request';

其他Vue组建使用this.request.get/post方式使用, 如下案例

methods: {
    load(){
      this.request.get("/user/findUserPageCondition", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userName: this.searchusername,
          nickname: this.searchnickname
        }
      }).then(res => {
        console.log(res)
      this.tableData = res.data.records
      this.total = res.data.total
      this.pageNum = res.data.current
      this.pageSize = res.data.size
      })
    },