Axios网络请求

一、前言

1、什么是Axios

在实际项目开发中前端页面所需要的数据往往需要从服务器端获取这必然涉及与服务器的通信。

Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。

Axios 在浏览器端使用XMLHttpRequests发送网络请求并能自动完成JSON数据的转换 。

Axios 是一个基于 promise 的 HTTP 库简单的讲就是可以发送get、post请求。说到get、post大家应该第一时间想到的就是Jquery吧毕竟前几年Jquery比较火的时候大家都在用他。但是由于Vue、React等框架的出现Jquery也不是那么吃香了。也正是Vue、React等框架的出现促使了Axios轻量级库的出现因为Vue等不需要操作Dom所以不需要引入Jquery.js了。官方网站

2、Axios特性

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

二、安装Axios

使用npm

npm install axios

下载完了之后在package.json里面查看是否有axios的版本号有就表示已经下载成功了

三、Axios的用法

1、发送GET请求

2、发送POST请求

3、async/await

async和await是ES8引入的新语法准确说来是异步函数实现的语法糖使用async和await可以更加方便的进行异步操作

async 关键字用于函数上async函数的返回值是Promise实例对象

await 关键字用于 async 函数当中await可以得到异步的结果

4、其他请求方式

参考这里

四、Axios与Vue整合

在实际项目开发中几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题

每个组件中都需要导入 axios

每次发请求都需要填写完整的请求路径

可以通过全局配置的方式解决上述问题

axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$http = axios
Vue.config.productionTip = false

axios.defaults.baseURL 作用如果axios发送的AJAX请求的URL不是完整路径的话,就拼接baseURL前缀

Vue.prototype.$http作用$http就在所有的Vue实例中可以用了

Vue.config.productionTip 作用作用——阻止vue启动生产消息阻止的内容如图所示

五、跨域问题

1、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

2、为什么会出现跨域问题

为了保证浏览器的安全不同源的客户端脚本在没有明确授权的情况下不能读写对方资源称为同源策略同源策略是浏览器安全的基石

同源策略Sameoriginpolicy是一种约定它是浏览器最核心也最基本的安全功能
所谓同源即指在同一个域就是两个页面具有相同的协议protocol主机host和端口号port

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域此时无法读取非同源网页的 Cookie无法向非同源地址发送 AJAX 请求

3、跨域问题解决

CORSCross-Origin Resource Sharing是由W3C制定的一种跨域资源共享技术标准其目的就是为了解决前端的跨域请求。

CORS可以在不破坏即有规则的情况下通过后端服务器实现CORS接口从而实现跨域通信。

CORS将请求分为两类简单请求和非简单请求分别对跨域通信提供了支持。

在前端代码与后端代码连接时前后端分离常常因为跨域问题而连接不上那么如何解决呢

在 export default 里面使用created:function方法代码如下

4、前端代码

    created:function(){
      var _this = this;
      axios.get("http://localhost:8088/user/findAll").then(function(response){
        _this.tableData = response.data;
        // console.log(response.data)
      })
      // this.$http.get("/user/findAll").then((response)=>{
      //   this.tableData = response.data;
      //   // console.log(response.data)
      // })
    },

5、后端代码讲解

在控制层加上 @CrossOrigin 注解 或者自定义配置类

package com.example.mpdemo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 使用了注解 @CrossOrigin就可以不用 CorsConfig 配置类了
// @Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许跨域访问的路径
                .allowedOrigins("*") // 允许跨域访问的源
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求的方法
                .maxAge(16800) // 预间隔时间
                .allowedHeaders("*") // 允许头部设置
                .allowCredentials(true); // 是否发送 cookie
    }
}

这里就使用注解的方式

我们看看控制层

package com.example.mpdemo.controller;

import com.example.mpdemo.mapper.OrderMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class OrderController {

    @Autowired
    private OrderMapper orderMapper;

    @GetMapping("/order/findAll")
    public List findAll(){

        List orders = orderMapper.selectAllOrdersAndUser();
        return orders;
    }

}

调用OrderMapper的selectAllOrdersAndUser方法

OrderMapper代码

package com.example.mpdemo.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.mpdemo.entity.Order;
import com.example.mpdemo.entity.User;
import com.sun.org.apache.xpath.internal.operations.Or;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface OrderMapper extends BaseMapper<Order> {

    @Select("select * from t_order where uid = #{uid}")
    List<Order> selectByUid(int uid);

//  查询所有的订单同时查询订单的用户
    @Select("select * from t_order")
    @Results({
            @Result(column = "id",property = "id"),
            @Result(column = "ordertime",property = "ordertime"),
            @Result(column = "total",property = "total"),
            @Result(column = "uid",property = "user",javaType = User.class,
                one=@One(select = "com.example.mpdemo.mapper.UserMapper.selectById")
            )
    })
    List<Order> selectAllOrdersAndUser();
}

数据库结构

6、前端代码讲解

Hello.vue 代码

<template>
<div>
    <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="出生年月"
      width="180">
    </el-table-column>
  </el-table>
  <!-- <i class="fa fa-camera-retro fa-lg"></i> -->
</div>
</template>

<!-- props 自定义属性,可以在外部使用自定义的名称不需要导入的方式来进行套娃 -->
<script>

// import axios from "axios";


export default {
    name: "Hello",
    data: function(){
        return {
        tableData: []
      }
    },
    created:function(){
      var _this = this;
      axios.get("http://localhost:8088/user/findAll").then(function(response){
        _this.tableData = response.data;
        // console.log(response.data)
      })
      // this.$http.get("/user/findAll").then((response)=>{
      //   this.tableData = response.data;
      //   // console.log(response.data)
      // })
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

就是发了个请求将数据放到tableData里面并渲染到页面上。

效果

六、拦截器

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

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你稍后需要移除拦截器可以这样

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

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

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});