Axios网络请求

哈喽~大家好，这篇来看看Axios网络请求。

​文章推荐	链接
SpringCloud Sentinel 使用	SpringCloud Sentinel 使用
将Nacos注册到springboot使用以及Feign实现服务调用	将Nacos注册到springboot使用以及Feign实现服务调用
微服务介绍与 SpringCloud Eureka	微服务介绍与 SpringCloud Eureka

目录

• 一、前言
• • 1、什么是Axios？
  • 2、Axios特性
• 二、安装Axios
• 三、Axios的用法
• • 1、发送GET请求
  • 2、发送POST请求
  • 3、async/await
  • 4、其他请求方式
• 四、Axios与Vue整合
• 五、跨域问题
• • 1、什么是跨域
  • 2、为什么会出现跨域问题？
  • 3、跨域问题解决
  • 4、前端代码
  • 5、后端代码讲解
  • 6、前端代码讲解
• 六、拦截器

一、前言

1、什么是Axios？

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

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

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

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

2、Axios特性

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

二、安装Axios

使用npm：

npm install axios

下载完了之后在里面查看是否有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

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

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

 = "http://localhost:8088"
.$http = axios
 = false

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

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

作用：作用——阻止vue启动生产消息，阻止的内容如图所示

五、跨域问题

1、什么是跨域

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

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

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

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

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

3、跨域问题解决

CORS（Cross-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;
        // ()
      })
      // this.$("/user/findAll").then((response)=>{
      //    = ;
      //   // ()
      // })
    },

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 = "")
            )
    })
    List<Order> selectAllOrdersAndUser();
}

数据库结构

6、前端代码讲解

代码

<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;
        // ()
      })
      // this.$("/user/findAll").then((response)=>{
      //    = ;
      //   // ()
      // })
    },
    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 () {/*...*/});